/*  ███████╗████████╗██╗   ██╗██╗     ███████╗███████╗
    ██╔════╝╚══██╔══╝╚██╗ ██╔╝██║     ██╔════╝██╔════╝
    ███████╗   ██║    ╚████╔╝ ██║     █████╗  ███████╗
    ╚════██║   ██║     ╚██╔╝  ██║     ██╔══╝  ╚════██║
    ███████║   ██║      ██║   ███████╗███████╗███████║
    ╚══════╝   ╚═╝      ╚═╝   ╚══════╝╚══════╝╚══════╝
    FILE_ID.DIZ ── one consolidated sheet, the whole face of KyrOS.
    cascade order is load-bearing; tokens up top, mobile shell down low.
    every !important below earns its keep - the reason rides next to it.   */

@keyframes windowOpen {
  0% {
    opacity: 0;
    transform: translateY(28px) scale(0.94);
    filter: blur(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}
@keyframes wobbleMin {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
    filter: blur(0);
  }
  18% {
    transform: translate(-8px, -4px) rotate(-2deg) scale(1.02);
  }
  36% {
    transform: translate(9px, 8px) rotate(2.5deg) scale(0.94);
  }
  58% {
    transform: translate(-4px, 24px) rotate(-1.5deg) scale(0.72);
    opacity: 0.9;
  }
  100% {
    transform: translate(var(--min-x, 0), var(--min-y, 120px)) scale(0.12);
    opacity: 0;
    filter: blur(9px);
  }
}
@keyframes poof {
  0% {
    opacity: 1;
    transform: scale(1) rotate(0);
    filter: blur(0);
  }
  44% {
    opacity: 0.93;
    transform: scale(1.05) rotate(-1deg);
    filter: blur(1px);
  }
  100% {
    opacity: 0;
    transform: scale(0.72) rotate(4deg);
    filter: blur(15px);
  }
}
@keyframes particles {
  to {
    transform: scale(2.8) rotate(30deg);
    opacity: 0;
  }
}
@keyframes contentSwap {
  0% {
    opacity: 0;
    transform: translateY(10px);
    filter: blur(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
/* miniIn is defined once, near .mini-player itself. An earlier, showier copy
   used to sit here - blur, rotate, overshoot - but a later @keyframes of the
   same name wins outright in the cascade, so it had never rendered since the
   day the second one was added. Keep one name, one definition. ★ */
@keyframes miniOut {
  to {
    opacity: 0;
    transform: translateY(20px) scale(0.84);
    filter: blur(8px);
  }
}
@keyframes readonlyCaretFlash {
  0% {
    opacity: 0;
    transform: translateY(2px);
  }
  25% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(0);
  }
}
@media (max-width: 1100px) {
  body {
    overflow: auto;
  }
  .win {
    position: relative !important;
    left: 110px !important;
    right: auto !important;
    top: auto !important;
    width: calc(100vw - 130px) !important;
    margin: 52px 10px 20px;
  }
  .dock {
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    justify-content: center;
    border-radius: 18px 18px 0 0;
  }
}
@media (max-width: 900px) {
  body {
    overflow: auto;
    min-height: 100%;
  }
  .topbar {
    height: 42px;
    padding: 0 12px;
  }
  .menu {
    display: none;
  }
  .win {
    left: 10px !important;
    right: auto !important;
    top: 58px !important;
    width: calc(100vw - 20px) !important;
    max-width: none !important;
    height: auto;
    max-height: calc(100vh - 134px);
  }
  .home,
  .projects,
  .experience,
  .player,
  .case-study {
    height: calc(100vh - 134px) !important;
  }
  .layout,
  .playerbody,
  .home-hero,
  .case-grid {
    grid-template-columns: 1fr !important;
  }
  .side {
    display: none;
  }
  .dock {
    width: calc(100vw - 20px);
    overflow-x: auto;
    justify-content: flex-start;
    bottom: 10px;
    height: 74px;
    padding: 10px 12px 13px;
  }
  .dock button {
    min-width: 48px;
    width: 48px;
    height: 48px;
  }
  .mini-player {
    left: 10px;
    right: 10px;
    width: auto;
    bottom: 92px;
  }
  .case-hero h2 {
    font-size: 32px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
@media (max-width: 760px) {
  .playerbody {
    grid-template-columns: 1fr !important;
    overflow: auto;
  }
  .tracktop {
    grid-template-columns: 68px minmax(0, 1fr) !important;
  }
  .viz {
    display: none;
  }
}
@media (max-width: 760px) {
  #home.home {
    width: calc(100vw - 20px) !important;
    height: calc(100vh - 134px) !important;
  }
  #home .layout,
  #home .home-hero {
    grid-template-columns: 1fr !important;
  }
  #home .side {
    display: none;
  }
  #home .hero-card h1 {
    font-size: 42px;
    max-width: 11ch;
  }
  .contact-shell,
  .player-redesign {
    grid-template-columns: 1fr !important;
  }
  .contact,
  .player {
    width: calc(100vw - 20px) !important;
    height: calc(100vh - 132px) !important;
  }
  .music-head {
    grid-template-columns: 72px minmax(0, 1fr) !important;
  }
  .viz {
    grid-column: 1/-1;
    width: 100%;
  }
  .cover {
    width: 72px !important;
    height: 72px !important;
  }
  .player-redesign {
    grid-template-columns: 1fr !important;
  }
  .player {
    width: calc(100vw - 20px) !important;
    height: calc(100vh - 132px) !important;
  }
}
@media (max-width: 820px) {
  .project-workbench {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }
  .projects .side {
    display: none;
  }
  .projects .layout {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 760px) {
  #player #eqBars.ck-eq-panel {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    height: 154px;
    min-height: 154px;
    max-height: 154px;
  }
  #player #eqBars.ck-eq-panel .ck-eq-rail {
    height: 50px;
    flex-basis: 50px;
  }
}
@keyframes linuxToastIn {
  from {
    opacity: 0;
    transform: translateX(26px) translateY(-8px) scale(0.98);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
    filter: blur(0);
  }
}
@media (max-width: 980px) {
  .projects-premium,
  .case-study-premium {
    min-width: 0;
  }
}
@media (max-width: 900px) {
  .about-hero-polished,
  .about-card-grid,
  .about-two-col {
    grid-template-columns: 1fr;
  }
  .about-os-polished {
    min-width: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  .dock button:hover,
  #dock button:hover,
  .project-card:hover,
  .file:hover,
  .tile:hover,
  .concept-card:hover,
  button:hover,
  .btn:hover,
  .filter-chip:hover {
    transform: none !important;
  }
}
@media (max-width: 760px) {
  :root {
    --style-polish-radius-window: 20px;
    --style-polish-radius-card: 18px;
  }

  .dock,
  #dock {
    border-radius: 20px !important;
  }

  .win {
    border-radius: 20px !important;
  }
}
@media (max-height: 760px) and (min-width: 761px) {
  .folder,
  .doc,
  .mail,
  .trash,
  .resume-doc,
  .music-folder {
    width: 42px !important;
    height: 42px !important;
  }
}
@media (max-height: 620px) and (min-width: 761px) {
  .folder,
  .doc,
  .mail,
  .trash,
  .resume-doc,
  .music-folder {
    width: 36px !important;
    height: 36px !important;
  }
}
@media (max-width: 900px), (pointer: coarse) {
  body.calm-effects,
  body.mobile-shell {
    overflow: hidden !important;
    min-height: 100dvh !important;
  }

  body.calm-effects .topbar,
  body.mobile-shell .topbar {
    height: 42px !important;
    padding: 0 10px !important;
  }

  body.calm-effects .topbar .status span:not(#topTime):not(#dateText):not(.sound-toggle),
  body.mobile-shell .topbar .status span:not(#topTime):not(#dateText):not(.sound-toggle) {
    display: none !important;
  }

  body.calm-effects .wallpaper,
  body.mobile-shell .wallpaper {
    inset: 42px 0 72px !important;
    opacity: 0.42 !important;
  }

  body.calm-effects .wallpaper-scene:not(.wallpaper-scene-zen),
  body.mobile-shell .wallpaper-scene:not(.wallpaper-scene-zen) {
    display: none !important;
  }

  body.calm-effects .win,
  body.mobile-shell .win {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    top: 50px !important;
    bottom: 82px !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 14px !important;
    transform: none !important;
  }

  body.calm-effects .win.hidden,
  body.mobile-shell .win.hidden {
    display: none !important;
  }

  body.calm-effects .resize-grip,
  body.mobile-shell .resize-grip {
    display: none !important;
  }

  body.calm-effects .bar,
  body.mobile-shell .bar {
    cursor: default !important;
    touch-action: auto !important;
  }

  body.calm-effects .win > .layout,
  body.calm-effects .win > .playerbody,
  body.calm-effects .win > .contact-shell,
  body.calm-effects .win > .settings-body,
  body.calm-effects .win > .shortcuts-body,
  body.calm-effects .win > .resume-body,
  body.calm-effects .win > .about-body,
  body.calm-effects .win > .concept-grid,
  body.calm-effects .win > .scrap-grid,
  body.mobile-shell .win > .layout,
  body.mobile-shell .win > .playerbody,
  body.mobile-shell .win > .contact-shell,
  body.mobile-shell .win > .settings-body,
  body.mobile-shell .win > .shortcuts-body,
  body.mobile-shell .win > .resume-body,
  body.mobile-shell .win > .about-body,
  body.mobile-shell .win > .concept-grid,
  body.mobile-shell .win > .scrap-grid {
    height: calc(100% - 42px) !important;
    max-height: calc(100% - 42px) !important;
    margin-bottom: 0 !important;
    overflow: auto !important;
  }

  body.calm-effects .layout,
  body.calm-effects .playerbody,
  body.calm-effects .home-hero,
  body.calm-effects .case-grid,
  body.calm-effects .project-workbench,
  body.calm-effects .contact-shell,
  body.mobile-shell .layout,
  body.mobile-shell .playerbody,
  body.mobile-shell .home-hero,
  body.mobile-shell .case-grid,
  body.mobile-shell .project-workbench,
  body.mobile-shell .contact-shell {
    grid-template-columns: 1fr !important;
  }

  body.calm-effects .side,
  body.mobile-shell .side {
    display: none !important;
  }

  body.calm-effects #home .hero-card h1,
  body.calm-effects .hero-card h1,
  body.mobile-shell #home .hero-card h1,
  body.mobile-shell .hero-card h1 {
    max-width: 100% !important;
    font-size: 34px !important;
    line-height: 1.05 !important;
  }

  body.calm-effects .dock,
  body.calm-effects #dock,
  body.mobile-shell .dock,
  body.mobile-shell #dock {
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    width: auto !important;
    height: 64px !important;
    padding: 8px 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    justify-content: flex-start !important;
    border-radius: 18px !important;
    transform: none !important;
    contain: layout style !important;
  }

  body.calm-effects .dock button,
  body.calm-effects #dock button,
  body.mobile-shell .dock button,
  body.mobile-shell #dock button {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    flex-basis: 46px !important;
    transform: none !important;
  }

  body.calm-effects .dock .clock,
  body.mobile-shell .dock .clock {
    display: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.calm-effects *,
  body.calm-effects *::before,
  body.calm-effects *::after {
    animation: none !important;
    transition: none !important;
  }
}
@media (max-width: 900px) {
  body.calm-effects #dock.dock-shelf-v7,
  body.mobile-shell #dock.dock-shelf-v7,
  #dock.dock-shelf-v7 {
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 76px !important;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 6px !important;
    justify-content: stretch !important;
    overflow: visible !important;
    border-radius: 20px !important;
    transform: none !important;
    animation: none !important;
  }

  body.calm-effects #dock.dock-shelf-v7 button,
  body.mobile-shell #dock.dock-shelf-v7 button,
  #dock.dock-shelf-v7 button {
    display: none !important;
  }

  body.calm-effects #dock.dock-shelf-v7 button[data-mobile-primary="true"],
  body.mobile-shell #dock.dock-shelf-v7 button[data-mobile-primary="true"],
  #dock.dock-shelf-v7 button[data-mobile-primary="true"] {
    display: flex !important;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 58px !important;
    padding: 7px 4px 6px !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    border-radius: 16px !important;
    transform: none !important;
  }

  #dock.dock-shelf-v7 button[data-open="home"] {
    order: 1 !important;
  }
  #dock.dock-shelf-v7 button[data-open="projects"] {
    order: 2 !important;
  }
  #dock.dock-shelf-v7 button[data-open="resume"] {
    order: 3 !important;
  }
  #dock.dock-shelf-v7 button[data-open="contact"] {
    order: 4 !important;
  }
  #dock.dock-shelf-v7 button[data-open="command"] {
    order: 5 !important;
  }

  body.calm-effects #dock.dock-shelf-v7 button.dock-hero-app,
  #dock.dock-shelf-v7 button.dock-hero-app {
    width: auto !important;
    height: 58px !important;
    min-width: 0 !important;
    flex-basis: 0 !important;
  }

  #dock.dock-shelf-v7 button svg {
    width: 20px !important;
    height: 20px !important;
  }

  #dock.dock-shelf-v7 .dock-mobile-label {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(238, 244, 251, 0.88);
    font: 800 10px/1.05 var(--sans, system-ui, sans-serif);
    letter-spacing: 0;
    white-space: nowrap;
  }

  #dock.dock-shelf-v7 .clock {
    display: none !important;
  }

  #dock.dock-shelf-v7 button.active::after {
    bottom: 3px !important;
    width: 18px !important;
    height: 3px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  #dock.dock-shelf-v7,
  #dock.dock-shelf-v7.dock-revealed,
  #dock.dock-shelf-v7 button.launch-pulse {
    animation: none !important;
  }
}
@keyframes settingsStableFadeIn {
  from {
    opacity: 0.01;
    filter: blur(4px);
  }
  to {
    opacity: 1;
    filter: none;
  }
}
@media (min-width: 900px) {
  body.calm-effects #settings.win {
    position: absolute !important;
    margin: 0 !important;
  }

  body.calm-effects #settings.win.opening {
    animation: settingsStableFadeIn var(--motion-panel) both !important;
    transform: none !important;
  }
}
@media (max-width: 899px), (pointer: coarse) {
  body.calm-effects #settings.win {
    width: 100vw !important;
    height: calc(100dvh - 96px) !important;
  }
}
@container developer-files (max-width: 720px) {
  #home .home-hero {
    grid-template-columns: 1fr !important;
  }
}
@container developer-files (max-width: 560px) {
  #home .layout {
    grid-template-columns: 1fr !important;
  }

  #home .side {
    display: none !important;
  }

  #home .main {
    padding: 16px !important;
  }

  #home .main h1,
  #home .home-section-title h1,
  #home .hero-card h1 {
    font-size: clamp(26px, 10cqw, 38px) !important;
    max-width: 100% !important;
  }
}
@container developer-files (max-width: 430px) {
  #home .tiles {
    grid-template-columns: repeat(auto-fit, minmax(min(96px, 100%), 1fr)) !important;
    gap: 10px !important;
  }

  #home .tile {
    min-height: 98px !important;
    padding: 10px 8px !important;
  }

  #home .tile .folder,
  #home .tile .doc,
  #home .tile .mail {
    width: 44px !important;
    height: 44px !important;
  }
}

/* Cross-surface layout contracts. */
@media (min-width: 901px) {
  .win .mob-back,
  .win .mob-switch {
    display: none !important;
  }
  #home.win:has(#homeProjectGrid) {
    height: min(760px, calc(100vh - 116px));
  }
}

.greeting-btn,
.contact-write,
.contact-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#home .tile-primary-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
#home .tile-primary-head > span {
  color: var(--muted-2);
  font: 700 9px/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
#home .tile-proof {
  width: 100%;
  height: 90px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(125, 216, 247, 0.2);
  border-radius: 9px;
  background: rgba(5, 14, 27, 0.62);
}
#home .tile-proof img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 35%;
  opacity: 0.76;
}

.work-card-featured .work-card-media {
  min-height: 204px;
}
.work-card-featured .work-card-problem {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
}
.work-card:hover,
.work-card:focus-visible {
  transform: none;
}

#settings .prefs-section {
  padding: 16px 0;
  border: 0;
  border-bottom: 1px solid var(--shell-line);
  border-radius: 0;
  background: transparent;
}
#settings .prefs-section:first-child {
  padding-top: 4px;
}
#settings .daylight-panel {
  margin-top: 14px;
}
#settings .daylight-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
#settings .daylight-modes button {
  min-width: 62px;
  min-height: 38px;
  border-radius: 8px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.035);
}
#settings .daylight-modes button:hover,
#settings .daylight-modes button:focus-visible,
#settings .daylight-modes button.is-active {
  color: var(--text);
  border-color: rgba(125, 216, 247, 0.46);
  background: rgba(125, 216, 247, 0.1);
}

#player .sound-shaping {
  margin-top: auto;
}
#player .sound-shaping:not([open]) {
  position: absolute;
  right: 18px;
  bottom: 14px;
  left: 18px;
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  flex: 0 0 42px;
  overflow: hidden;
}
#player .music-console {
  position: relative;
  padding-bottom: 64px;
}
#player .track-copy .audio-error {
  margin-top: 7px;
}

@media (max-width: 860px) {
  #settings .settings-nav {
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) var(--scroll-track);
    mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 22px), transparent 100%);
  }
}

@media (max-width: 640px) {
  #home .tile-primary {
    gap: 8px;
  }
  #home .tile-primary-head > span {
    font-size: 8.5px;
  }
  #home .tile-proof {
    height: 52px;
  }
  #experience.is-reading .toolbar-icon.copy-md {
    display: none;
  }
  #experience.is-reading .about-title-reading {
    min-width: 0;
    overflow: visible;
    white-space: nowrap;
    font-size: 12px;
  }
  #experience.is-reading .about-title-reading .sample-chip {
    flex: 0 0 auto;
  }
  #player .track.music-console {
    min-height: 410px !important;
  }
  body.mobile-shell #miniPlayer.mini-player:not(.hidden) {
    display: block !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 82px !important;
    width: auto !important;
    z-index: 1500;
  }
  #settings .daylight-modes button {
    min-height: 44px;
    flex: 1 1 calc(33.333% - 6px);
  }
}

/* The home body fills the window below its 44px title bar. */
#home.win > .layout {
  height: calc(100% - 44px);
  max-height: none;
  min-height: 0;
  margin-bottom: 0;
  align-items: stretch;
  overflow: hidden;
  background: #151e2a;
}
#home.win > .layout > .side {
  align-self: stretch;
  height: 100%;
  box-sizing: border-box;
  background: linear-gradient(180deg, #172230, #141e2a);
}
#home.win > .layout > .main,
#home.win > .layout .project-main {
  height: 100%;
  min-height: 0;
  overflow: auto;
  background: #18222f;
}
@media (min-width: 861px) {
  #home.win > .layout {
    position: absolute;
    inset: 44px 0 0;
    height: auto;
  }
}

/* Recent Work: editorial proof cards, not dashboard-component demos. The
   feature is calm and image-led; supporting studies use compact product
   frames with copy that can be scanned before the next scroll. */
#homeProjectGrid.work-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 2px 2px 26px;
}
#home .work-head,
#projects .work-head {
  margin-bottom: 18px;
  padding-bottom: 15px;
}
#home .work-head h1,
#projects .work-head h1 {
  margin: 2px 0 7px;
  font: 700 clamp(34px, 4.2cqw, 44px) / 1.04 var(--font-display);
  letter-spacing: -0.035em;
}
#home .work-head p,
#projects .work-head p {
  font-size: 13px;
  line-height: 1.45;
}
#homeProjectGrid .work-card {
  border: 1px solid rgba(170, 196, 218, 0.16);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(29, 43, 59, 0.94), rgba(20, 31, 44, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 10px 28px rgba(2, 8, 18, 0.16);
}
#homeProjectGrid .work-card:hover,
#homeProjectGrid .work-card:focus-visible {
  border-color: color-mix(in srgb, var(--card-accent) 52%, rgba(170, 196, 218, 0.24));
  background: linear-gradient(160deg, rgba(32, 48, 66, 0.96), rgba(21, 33, 47, 0.99));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    inset 0 0 0 1px color-mix(in srgb, var(--card-accent) 14%, transparent),
    0 16px 34px rgba(2, 8, 18, 0.28);
  transform: none;
}
#homeProjectGrid .work-card:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--card-accent) 78%, white);
  outline-offset: -3px;
}
#homeProjectGrid .work-card-featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(260px, 0.88fr);
  min-height: 286px;
}
#homeProjectGrid .work-card-media {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: 11px 11px 0;
  overflow: hidden;
  border: 1px solid rgba(170, 196, 218, 0.12);
  border-radius: 10px;
  background: #0f1824;
}
#homeProjectGrid .work-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
  background: linear-gradient(180deg, transparent 68%, rgba(4, 10, 18, 0.12));
}
#homeProjectGrid .work-card-featured .work-card-media {
  min-height: 0;
  max-height: none;
  margin: 11px;
  border: 1px solid rgba(170, 196, 218, 0.13);
  border-radius: 10px;
}
#homeProjectGrid .work-card-media img {
  transform: none;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
#homeProjectGrid .work-card:hover .work-card-media img,
#homeProjectGrid .work-card:focus-visible .work-card-media img {
  transform: scale(1.015);
}
#homeProjectGrid .work-card-body {
  gap: 8px;
  padding: 14px 16px 16px;
}
#homeProjectGrid .work-card-featured .work-card-body {
  justify-content: center;
  gap: 10px;
  padding: 24px 24px 22px 12px;
}
#homeProjectGrid .work-kicker {
  font: 750 9.5px/1.2 var(--font-body);
  letter-spacing: 0.13em;
  color: #8d9cad;
}
#homeProjectGrid .sample-chip {
  padding: 2px 7px;
  border-color: rgba(121, 199, 242, 0.28);
  background: rgba(121, 199, 242, 0.045);
  color: #90cce9;
  font-size: 8px;
  letter-spacing: 0.09em;
}
#homeProjectGrid .work-card h3 {
  font: 680 17px/1.25 var(--font-display);
  letter-spacing: -0.012em;
}
#homeProjectGrid .work-card-featured h3 {
  font-size: 27px;
  line-height: 1.08;
}
#homeProjectGrid .work-card-problem {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: #aebac8;
  font-size: 12.75px;
  line-height: 1.52;
}
#homeProjectGrid .work-card-featured .work-card-problem {
  display: block;
  overflow: visible;
  color: #bdc8d4;
  font-size: 14px;
  line-height: 1.56;
}
#homeProjectGrid .work-card-role {
  padding-top: 8px;
  border-top: 1px solid rgba(170, 196, 218, 0.1);
  color: #8494a6;
  font: 550 10.5px/1.45 var(--font-mono);
  letter-spacing: 0.015em;
}
#homeProjectGrid .work-card-more {
  min-height: 26px;
  margin-top: auto;
  padding-top: 7px;
  color: color-mix(in srgb, var(--card-accent) 72%, #dce7f1);
  font: 700 11.5px/1 var(--font-body);
}
#homeProjectGrid .work-card-more .kyr-icon {
  width: 13px;
  height: 13px;
}
@media (max-width: 700px) {
  #homeProjectGrid.work-grid {
    grid-template-columns: 1fr;
  }
  #homeProjectGrid .work-card-featured {
    grid-template-columns: 1fr;
  }
  #homeProjectGrid .work-card-featured .work-card-media {
    aspect-ratio: 16 / 9;
    margin-bottom: 0;
  }
  #homeProjectGrid .work-card-featured .work-card-body {
    padding: 16px;
  }
}
/* ══════════════════════════════════════════════════════════════════════
   [ * ]  MERGED BASE RULES · the shared foundation every surface leans on
   ────────────────────────────────────────────────────────────────────── */
:root {
  --eq-panel-height: 84px;
  --bg: #060914;
  --panel: rgba(12, 18, 31, 0.72);
  --panel-solid: #101827;
  --glass: rgba(16, 24, 38, 0.58);
  --line: rgba(217, 235, 255, 0.16);
  --line-strong: rgba(248, 233, 202, 0.28);
  --text: #eef5ff;
  --muted: #9caabd;
  --pink: #ff5c9d;
  --pink2: #eb3b82;
  --purple: #a980ff;
  --blue: #58b7ff;
  --cyan: #72f3ff;
  --green: #a8ff95;
  --yellow: #ffe08a;
  --orange: #ffad66;
  --r: 14px;
  /* Kept for older components; points at the shared elevation token below. */
  --shadow: var(--elev-window);
  /* One display face, one body face, and one monospace face. */
  --font-display:
    "Ubuntu", "Ubuntu Sans", "Atkinson Hyperlegible Next", Cantarell, Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, sans-serif;
  --font-body:
    "Atkinson Hyperlegible Next", "Ubuntu Sans", "Ubuntu", Cantarell, Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", "Atkinson Hyperlegible Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --mono: var(--font-mono);
  --sans: var(--font-body);
  --ink: #f6efe1;
  --cream: #f8e9ca;
  --cream-soft: rgba(248, 233, 202, 0.74);
  --muted-2: #718094;
  --glass-strong: rgba(18, 27, 43, 0.82);
  --soft-shadow: var(--elev-raised);
  --display: var(--font-display);
  --accent-gradient: linear-gradient(135deg, var(--pink), var(--purple));
  --linux-bg: #050914;
  --linux-ink: #f4f7fb;
  --linux-muted: #a8b3c5;
  --linux-panel: rgba(9, 13, 22, 0.72);
  --linux-panel-strong: rgba(12, 17, 28, 0.86);
  --linux-border: rgba(255, 255, 255, 0.12);
  --linux-accent: #62a0ea;
  --linux-accent-2: #8ff0a4;
  --linux-warn: #f6d32d;
  --linux-red: #ed333b;
  --linux-radius: 18px;
  --linux-shadow: var(--elev-window);
  --body: var(--sans);
  --style-polish-radius-window: 24px;
  --style-polish-radius-card: 20px;
  --style-polish-radius-control: 14px;
  --style-polish-line: rgba(255, 255, 255, 0.12);
  --style-polish-line-strong: rgba(255, 255, 255, 0.18);
  --style-polish-surface: rgba(255, 255, 255, 0.055);
  --style-polish-surface-strong: rgba(255, 255, 255, 0.082);
  --style-polish-shadow: var(--elev-window);
  --style-polish-soft-shadow: var(--elev-raised);
  --resize-safe: 24px;
}

/* ──[ · ]── KyrOS design tokens ────────────────────────────────────────────
   New components use the --kyr-* names; older aliases stay until their
   original components migrate. */
:root {
  /* ──[ · ]── type ──────────────────────────────────────────────────────
     Three families, locked by role (FW-1.2): Ubuntu = display, wordmark,
     window titles; Atkinson Hyperlegible Next = body + every small UI label;
     JetBrains Mono = terminal, code, file paths only - plus the one
     instrument readout, the topbar clock. */
  --kyr-display: var(--font-display);
  --kyr-sans: var(--font-body);
  --kyr-mono: var(--font-mono);

  /* Each role pairs a font shorthand with a letter-spacing token. */
  --type-display: 700 64px/1.04 var(--font-display);
  --type-display-ls: -0.5px;
  --type-lede: 400 19px/1.55 var(--font-body);
  --type-lede-ls: 0px;
  --type-title: 500 15px/1.25 var(--font-display);
  --type-title-ls: 0.2px;
  --type-body: 400 15.5px/1.68 var(--font-body);
  --type-body-ls: 0px;
  --type-label: 700 14px/1 var(--font-body);
  --type-label-ls: 0.4px;
  --type-chip: 700 11px/1 var(--font-body);
  --type-chip-ls: 1.2px;
  --type-winmeta: 400 12.5px/1.4 var(--font-body);
  --type-winmeta-ls: 0.3px;
  --type-status: 500 12.5px/1.4 var(--font-body);
  --type-status-ls: 0.3px;
  --type-path: 400 12.5px/1.4 var(--font-mono);
  --type-path-ls: 0px;
  --type-terminal: 400 13px/1.6 var(--font-mono);
  --type-terminal-ls: 0px;
  --type-code: 400 13px/1.7 var(--font-mono);
  --type-code-ls: 0px;
  --type-clock: 400 11.5px/1.4 var(--font-mono);
  --type-clock-ls: 1.2px;
  --type-wordmark: 700 16px/1 var(--font-display);
  --type-wordmark-ls: 0.4px;

  /* Type scale - 1.25 major third, rooted on the 16px html base. */
  --kyr-size-hero: 2.441rem;
  --kyr-size-title: 1.953rem;
  --kyr-size-heading: 1.563rem;
  --kyr-size-subhead: 1.25rem;
  --kyr-size-body: 1rem;
  --kyr-size-meta: 0.8rem;
  --kyr-size-micro: 0.64rem;

  /* ──[ · ]── surface · the night sky ────────────────────────────────── */
  --kyr-void: #060914;
  --kyr-surface: rgba(12, 18, 31, 0.72);
  --kyr-surface-solid: #101827;
  --kyr-surface-raised: rgba(18, 27, 43, 0.82);

  /* ──[ · ]── ink · warm against the cold sky ────────────────────────── */
  --kyr-ink: #f6efe1;
  --kyr-ink-dim: #9caabd;
  --kyr-ink-faint: #718094;
  /* --kyr-ink-faint clears 4.5:1 on --kyr-void but NOT on lighter surfaces
     (4.46:1 on the #111722 editor) → use on raised/lighter surfaces, it
     clears the gate on both. See docs/identity.md. */
  --kyr-ink-faint-raised: #758498;

  /* ──[ · ]── light · one living light source ────────────────────────── */
  /* Default matches settings.js's "cyan" default → pre-JS and post-JS paint
     agree. (The old --linux-accent #62a0ea never rendered - settings.js
     overwrote it on every load.) */
  --kyr-accent: #1c9bd6;
  --kyr-accent-2: #62d0f7;
  --kyr-glow: color-mix(in srgb, var(--kyr-accent) 20%, transparent);

  /* ──[ · ]── shape · one radius scale ───────────────────────────────── */
  --kyr-radius-window: 24px;
  --kyr-radius-card: 20px;
  --kyr-radius-control: 14px;
  --kyr-radius-pill: 999px;

  /* ──[ · ]── hairline · one border, used everywhere ─────────────────── */
  --kyr-hairline: rgba(217, 235, 255, 0.16);
  --kyr-hairline-strong: rgba(248, 233, 202, 0.28);
  --kyr-border: 1px solid var(--kyr-hairline);

  /* Three elevations cover the desktop, focused windows, and raised controls. */
  --elev-desktop: none;
  --elev-window: 0 24px 64px rgba(0, 0, 0, 0.5), 0 3px 10px rgba(0, 0, 0, 0.35);
  --elev-raised: 0 10px 28px rgba(0, 0, 0, 0.3);
  --kyr-shadow-window: var(--elev-window);
  --kyr-shadow-card: var(--elev-raised);

  /* The Markdown source view uses a calmer, cooler palette than the shell. */
  --kyr-ed-bg: #0d1522;
  --kyr-ed-chrome: #182435;
  --kyr-ed-elevated: #111c2b;
  --kyr-ed-text: #dce6f2;
  --kyr-ed-text-2: #9aa9ba;
  /* Punctuation still clears 4.5:1 on the editor + fenced-code surfaces. */
  --kyr-ed-punct: #74849b;
  --kyr-ed-heading: #7dd3fc;
  --kyr-ed-strong: #f3f7fc;
  --kyr-ed-em: #c4b5fd;
  --kyr-ed-link: #67e8f9;
  --kyr-ed-code: #a7f3d0;
  --kyr-ed-code-block: #c8d6e5;
  --kyr-ed-marker: #86efac;
  --kyr-ed-quote: #38bdf8;
  --kyr-ed-selection: rgba(56, 189, 248, 0.22);
  --kyr-ed-active-line: rgba(255, 255, 255, 0.025);
  --kyr-ed-cursor: #7dd3fc;
  --kyr-ed-border: rgba(125, 211, 252, 0.14);
  /* Typography. --font-mono leads with the self-hosted JetBrains Mono;
     the listed faces are fallbacks for anyone who has them. */
  --kyr-ed-mono: var(--font-mono);
  --kyr-ed-size: 14.5px;
  --kyr-ed-leading: 1.65;
  --kyr-ed-pad-x: 28px;
  --kyr-ed-pad-y: 20px;
  --kyr-ed-gutter-w: 44px;

  /* Compatibility aliases; avoid adding new uses. */
  --linux-accent: var(--kyr-accent);
  --linux-accent-2: var(--kyr-accent-2);
}

/* Display and lede type scale together at narrow widths. */
@media (max-width: 720px) {
  :root {
    --type-display: 700 42px/1.04 var(--font-display);
    --type-lede: 400 17px/1.55 var(--font-body);
  }
}

/* ──[ · ]── scrollbars · chrome, not signal ─────────────────────────────
   These used to be painted in the accent: a 62%-alpha cyan thumb inside
   windows, and something brighter again under calm-effects. The accent is the
   site's SIGNAL colour - focus rings, links, the node on the brand mark - so
   spending it on a scrollbar made a piece of chrome compete with the content
   beside it, and put a second cyan vertical a few pixels from the work card's
   own accent border. Nine different cyans were in use across this file.
   One neutral pair now, bright enough to find and quiet enough to ignore. ★ */
:root {
  --scroll-thumb: rgba(198, 215, 235, 0.2);
  --scroll-thumb-hover: rgba(214, 229, 246, 0.36);
  --scroll-track: transparent;
}
* {
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}
html,
body {
  height: 100%;
  font-family: var(--display);
  color: var(--linux-ink);
}
body {
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font-family: var(--sans);
  background: radial-gradient(circle at 35% 0%, #112744 0, #07101f 32%, #050812 78%);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.2;
  background:
    radial-gradient(circle at 18% 12%, rgba(98, 160, 234, 0.16), transparent 28%),
    radial-gradient(circle at 82% 4%, rgba(143, 240, 164, 0.1), transparent 26%),
    linear-gradient(180deg, transparent 0 64%, rgba(0, 0, 0, 0.22));
  mix-blend-mode: screen;
  z-index: 1;
}
.wallpaper {
  position: fixed;
  inset: 34px 0 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  transition: opacity var(--motion-panel);
}
.mountain-wallpaper svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.mountain-wallpaper::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(1, 5, 12, 0.56), rgba(1, 5, 12, 0.12) 48%, rgba(1, 5, 12, 0.02)),
    radial-gradient(circle at 50% 38%, transparent 0 42%, rgba(0, 0, 0, 0.16) 100%);
}
.topbar {
  position: fixed;
  inset: 0 0 auto;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 18px;
  background: radial-gradient(circle at 18% 0%, rgba(114, 243, 255, 0.09), transparent 34%), rgba(6, 10, 20, 0.5);
  backdrop-filter: blur(18px) saturate(1.16);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  z-index: 1000;
  font-size: 13px;
  letter-spacing: 0.005em;
  -webkit-backdrop-filter: blur(18px) saturate(1.16);
  font: 600 13px/1 var(--sans);
}
.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  font-weight: 800;
  color: var(--cream);
}
.brand .mark {
  font-size: 22px;
}
/* ──[ · ]── FW-1.4 · icon family plumbing ────────────────────────────────────
   Geometry lives ONLY in the #kyr-icon-* sprite at the top of index.html.
   These classes carry the per-size optical compensation from the approved
   family-sheet: primary stroke (--kyr-icon-sw), filled-dot radius
   (--kyr-icon-dot), the brand mark's stroke (--kyr-icon-mw) + star node
   (--kyr-icon-node), and the drop-details-at-16px rule (--kyr-icon-detail).
   Custom props inherit into the <use> shadow tree → one symbol serves every
   size honestly. */
.kyr-icon {
  display: inline-block;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--kyr-icon-sw, 1.75);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kyr-icon-12,
.kyr-icon-14 {
  --kyr-icon-sw: 2.12;
  --kyr-icon-dot: 1.3;
  --kyr-icon-mw: 2.75;
  --kyr-icon-node: 2.1;
  --kyr-icon-detail: hidden;
}
.kyr-icon-16 {
  --kyr-icon-sw: 2.05;
  --kyr-icon-dot: 1.25;
  --kyr-icon-mw: 2.6;
  --kyr-icon-node: 2;
  --kyr-icon-detail: hidden;
}
.kyr-icon-18 {
  --kyr-icon-sw: 1.97;
  --kyr-icon-dot: 1.17;
  --kyr-icon-mw: 2.5;
  --kyr-icon-node: 1.95;
}
.kyr-icon-20 {
  --kyr-icon-sw: 1.9;
  --kyr-icon-dot: 1.1;
  --kyr-icon-mw: 2.42;
  --kyr-icon-node: 1.9;
}
.kyr-icon-22 {
  --kyr-icon-sw: 1.82;
  --kyr-icon-dot: 1.05;
  --kyr-icon-mw: 2.35;
  --kyr-icon-node: 1.85;
}
.kyr-icon-24 {
  --kyr-icon-sw: 1.75;
  --kyr-icon-dot: 1;
  --kyr-icon-mw: 2.28;
  --kyr-icon-node: 1.8;
}
.kyr-icon-32 {
  --kyr-icon-sw: 1.65;
  --kyr-icon-dot: 0.95;
  --kyr-icon-mw: 2.15;
  --kyr-icon-node: 1.7;
}
.kyr-icon-48 {
  --kyr-icon-sw: 1.5;
  --kyr-icon-dot: 0.9;
  --kyr-icon-mw: 2;
  --kyr-icon-node: 1.6;
}
.status {
  display: flex;
  gap: 17px;
  align-items: center;
  color: #dfe7f5;
}
.sep {
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.18);
}
.folder,
.doc,
.mail,
.trash {
  transition: var(--motion-focus);
}
/* FW-1.4: tile icons are family glyphs from the sprite - the Material-era
   folder/mail/book clip-art is retired. The container keeps its footprint so
   tile layout does not move; the glyph inherits one quiet ink. */
.folder,
.doc,
.mail {
  width: 58px;
  height: 58px;
  border: 0;
  border-radius: 0;
  position: relative;
  display: grid;
  place-items: center;
  background: none;
  box-shadow: none;
  color: color-mix(in srgb, var(--cyan) 58%, var(--cream));
}
.purple {
  color: var(--purple);
}
.blue {
  color: var(--blue);
}
.cyan {
  color: var(--cyan);
}
.mail:before,
.mail:after {
  display: none;
  content: none;
}
.win {
  position: absolute;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035) 34%, rgba(8, 12, 20, 0.78)),
    rgba(10, 14, 23, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--style-polish-radius-window);
  /* FW-1.3: unfocused windows rest at the raised level; the focused window
     alone carries --elev-window (see the canonical focus pair). */
  box-shadow: var(--elev-raised);
  backdrop-filter: blur(28px) saturate(1.4);
  overflow: hidden;
  z-index: 20;
  transform-origin: center;
  isolation: auto;
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  border-color: var(--style-polish-line);
}
/* WS-3 - only hint will-change while a window is actually animating or being
   manipulated. An always-on will-change forces every window onto a permanent
   compositor layer (memory cost, worse with backdrop-filter) for no benefit
   when idle; scoping it lets the browser drop the layer between interactions. */
.win.opening,
.win.closing,
.win.minimizing,
.win.is-dragging,
.win.is-resizing {
  will-change: transform, opacity, filter;
}
/* FW-1.3: the .win::before glow overlay (two radial glows + gradient + double
   inset shine) is gone - a window is surface + one shadow + one border. */
.win > * {
  position: relative;
  z-index: 2;
}
.hidden {
  display: none;
}
.bar {
  height: 42px;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 0 10px 0 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
  cursor: grab;
  user-select: none;
  touch-action: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(30px) saturate(1.4);
  -webkit-app-region: drag;
}
.bar:active {
  cursor: grabbing;
}
/* FW-1.2: the title is brand, so it is set in the display face and reads from
   the left - centred titles are the macOS tell, and they fight the spine.
   Type is owned by the late `.bar .title` rule (the --type-title role); this
   base rule only carries colour and overflow behaviour. */
.title {
  color: var(--kyr-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* ──[ · ]── is-autofocus · the app moved focus, the visitor did not ──────
   Set by focusQuietly() in app.js when focus is placed on a container so the
   keyboard and screen reader land in content that just appeared. Chrome
   matches :focus-visible for programmatic focus on tabindex="-1" elements even
   when the visitor arrived by mouse, which paints a ring nobody asked for.
   The mark is removed on the first real keypress, so keyboard users keep their
   "you are here". !important because some rings (the dock lens) are themselves
   !important. ★ */
.is-autofocus:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* ══════════════════════════════════════════════════════════════════════
   [ * ]  KYR WINDOW CHROME · the titlebar
   ──────────────────────────────────────────────────────────────────────
   The accent spine is retired. It was a 3px gradient strip on the bar's
   left edge, but `inset: 0 auto 0 0` ran it straight into the window's
   rounded top-left corner, where it was clipped into a curved sliver -
   it read as a rendering artifact, not a mark. Its gradient was heaviest
   at the top too, concentrating the weight exactly where the corner was
   mangling it, in the spot the eye enters, competing with the title.

   Nothing is lost: focus was already carried three other ways - the
   border shifts to 45% accent, the shadow swaps to --elev-window, and an
   unfocused titlebar recedes. The spine was a fourth signal saying less
   than the three. One less thing on the bar. ★
   ────────────────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════════
   [ * ]  KYR WINDOW CHROME · window controls (FW-1.2)
   ──────────────────────────────────────────────────────────────────────
   One control set per window, on the right, drawn not typed - glyphs are
   CSS strokes, so they never wait on a font shipping "▢", and they inherit
   currentColor to take the accent (later the sky) for free. This retired
   two overlapping sets, incl. three <span> macOS traffic lights keyed by
   DOM index - unlabelled, keyboard-unreachable, yet the only maximise path.
   No second set (R7); these stay real <button>s (R8).
   ────────────────────────────────────────────────────────────────────── */
.win-controls {
  display: flex;
  gap: 2px;
  margin-left: auto; /* controls go right; the spine owns the left → */
  align-items: center;
}
.win-controls button {
  all: unset;
  position: relative;
  box-sizing: border-box;
  cursor: pointer;
  /* 30px hit target around a 16px glyph - never a 12px gamble. */
  width: 30px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--kyr-ink-dim);
  transition:
    color var(--motion-focus),
    background-color var(--motion-focus),
    box-shadow var(--motion-focus),
    transform var(--motion-focus);
}
/* The glyphs: minimise -, maximise ▢, close ✕ - FW-1.4 family symbols from
   the sprite (#kyr-icon-min / #kyr-icon-max / #kyr-icon-close), sized for the titlebar. */
.win-ctl .kyr-icon {
  pointer-events: none;
  width: 16px;
  height: 16px;
}

/* Every control answers on hover - a quiet frosted wash for min/max, and the
   one red fill for close: the accent means "this window", red means "this
   window goes away". */
.win-controls button:hover,
.win-controls button:focus-visible {
  color: var(--kyr-ink);
  background: rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.win-controls button:active {
  transform: scale(0.92);
}
.win-ctl-close:hover,
.win-ctl-close:focus-visible {
  color: #fff;
  background: linear-gradient(180deg, #f0565f, #d42b35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 3px 12px rgba(237, 51, 59, 0.4);
}
/* Focus must be as intentional as hover (R8) - never rely on the tint alone. */
.win-controls button:focus-visible {
  outline: 2px solid var(--kyr-accent-2);
  outline-offset: 1px;
}
.home {
  left: 13%;
  top: 8%;
  width: 670px;
  height: 472px;
}
.projects {
  left: 56%;
  top: 9%;
  width: min(980px, calc(100vw - 42px));
  height: min(660px, calc(100vh - 112px));
}
.experience {
  left: 24%;
  top: 42%;
  width: 650px;
  height: 390px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 112px);
}
.concepts {
  left: 34%;
  top: 17%;
  width: 520px;
  height: 360px;
}
.calcwin {
  left: 8%;
  top: 56%;
  width: 290px;
}
.player {
  left: 62%;
  top: 55%;
  width: min(780px, calc(100vw - 30px));
  min-height: 430px;
  height: min(620px, calc(100vh - 120px));
}
.contact {
  left: 400px;
  top: 118px;
  width: min(600px, calc(100vw - 34px));
  height: min(468px, calc(100vh - 116px));
}
.trashwin {
  left: 18%;
  top: 18%;
  width: 610px;
  height: 410px;
}
.trash-content {
  padding: 16px;
  height: calc(100% - 36px);
  overflow-y: auto;
}
.win.opening {
  animation: windowOpen var(--motion-enter) both;
}
.win.minimizing {
  animation: wobbleMin var(--motion-enter) forwards;
}
.win.closing {
  animation: poof var(--motion-dismiss) forwards;
}
.win.closing::after {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 30%, var(--pink) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 30%, var(--cyan) 0 2px, transparent 3px),
    radial-gradient(circle at 42% 78%, var(--purple) 0 2px, transparent 3px),
    radial-gradient(circle at 86% 75%, var(--blue) 0 2px, transparent 3px);
  animation: particles var(--motion-dismiss) forwards;
  z-index: 6;
}
.layout {
  display: grid;
  grid-template-columns: 150px 1fr;
  height: calc(100% - 36px);
  min-height: 0;
  background: rgba(3, 7, 14, 0.14);
}
.side {
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  padding: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
}
.side div {
  font-family: var(--font-body);
  padding: 8px 9px;
  border-radius: 12px;
  color: #b7c2d4;
  font-size: 14px;
  cursor: pointer;
  font-weight: 650;
  transition: var(--motion-focus);
}
/* :not(.side-invite) - the invitation is a block of copy, not a nav row, and
   was inheriting the row hover fill as a box around the whole thing. */
.side div:not(.side-invite):hover,
.side .on {
  background: linear-gradient(90deg, color-mix(in srgb, var(--pink) 22%, transparent), rgba(255, 255, 255, 0.045));
  color: var(--cream);
}
.side small {
  display: block;
  margin: 12px 0 5px;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--font-body);
}
/* The sidebar's closing note. It replaced a bordered card that concatenated
   the brand, the role, and a "Build • Design • Deploy" motto into one run-on
   line - three restatements of things the page already says, in the heaviest
   object in the rail. An invitation earns its place; a slogan does not. No
   border here: the rail's only boxed element should never be the decorative
   one. ★ */
.side-invite {
  margin-top: 18px;
  padding: 0 2px;
}
.side-invite-line {
  margin: 0 0 6px;
  /* The question is the message; the link is only the door. It reads at the
     nav's own size and near its brightness so it carries the weight, and the
     action sits under it as plain accented text - a bordered pill here made
     the CTA the loudest object in a rail where nothing else has a box, which
     inverted the hierarchy and shrank the sentence that mattered. ★ */
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.42;
  text-wrap: balance;
  opacity: 0.82;
}
#home .side-invite-btn {
  /* Scoped to #home to clear `.win button:not(...)`, the shared control skin
     that was re-boxing this link (0,5,1 beats a bare class). */
  appearance: none;
  /* the shared skin also leaves an inset top highlight and an 11px radius -
     together they drew a ghost pill outline above the label */
  box-shadow: none;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
  border: 0;
  background: none;
  white-space: nowrap; /* the rail is narrow - never let the label break */
  color: var(--cyan);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: color var(--motion-focus);
}
/* The label lights from left to right on hover - a gradient wider than the
   text, slid across it and clipped to the glyphs. It reads as the link warming
   up rather than a control changing state, which is the right register for an
   invitation. Guarded by @supports so a browser without background-clip:text
   simply keeps solid cyan instead of rendering nothing. The chevron keeps its
   own colour: it is outside the clip, and would vanish with the fill. ★ */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  #home .side-invite-btn span {
    /* Ordered bright → cyan, so the slide both WIPES a highlight across the
       word and leaves it brighter than it started. A symmetric gradient only
       flickered: it began and ended on the same cyan, so once the band had
       passed there was nothing to show for the hover. */
    background-image: linear-gradient(
      100deg,
      #ffffff 0%,
      var(--fw-paper, #eef5ff) 22%,
      var(--cyan) 58%,
      var(--cyan) 100%
    );
    background-size: 260% 100%;
    background-position: 100% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    transition: background-position 0.62s var(--ease-transit, ease);
  }
  #home .side-invite-btn:hover span,
  #home .side-invite-btn:focus-visible span {
    background-position: 0 50%;
  }
}
#home .side-invite-btn .kyr-icon {
  color: var(--cyan);
  /* Flex centring aligns the icon BOX to the label box, but "Say hello" is
     mostly x-height with one descender, so its visual mass sits above that
     centre and the chevron reads low. 1px up puts it on the x-height band. */
  transform: translateY(-1px);
  transition:
    transform var(--motion-focus),
    color var(--motion-focus);
}
#home .side-invite-btn:hover .kyr-icon,
#home .side-invite-btn:focus-visible .kyr-icon {
  color: var(--cream);
  transform: translate(2px, -1px);
}
#home .side-invite-btn:focus-visible {
  outline: 2px solid var(--fw-accent, #62d0f7);
  outline-offset: 3px;
  border-radius: 4px;
}
.main {
  padding: 34px 26px;
  overflow: auto;
  min-height: 0;
}
.main h1 {
  font-size: clamp(34px, 4vw, 58px);
  margin: 0 0 6px;
  line-height: 0.95;
  margin-bottom: 12px;
  background: linear-gradient(110deg, var(--cream), #fff, var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.main p,
.muted {
  color: var(--muted);
  font-size: 19px;
  font-weight: 500;
}
.main.content-swap {
  animation: contentSwap var(--motion-panel) both;
}
.tiles {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-top: 20px;
}
.tile {
  min-height: 124px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 8px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.026);
  cursor: pointer;
  text-align: center;
  transition: var(--motion-focus);
}
.tile:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--kyr-accent-2) 40%, transparent);
  box-shadow: var(--elev-raised);
}

/* WS-3 - pointer-following highlight on the home tiles. Fine-pointer + hover
   devices only, and only when "Reduce effects" is off, so touch and calm-mode
   visitors never see it. KyrPointerGlow feeds --glow-x / --glow-y. */
@media (hover: hover) and (pointer: fine) {
  html:not([data-reduced-effects="on"]) .tile {
    position: relative;
    overflow: hidden;
  }
  html:not([data-reduced-effects="on"]) .tile::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--motion-focus);
    background: radial-gradient(
      220px circle at var(--glow-x, 50%) var(--glow-y, 50%),
      rgba(102, 247, 255, 0.16),
      transparent 60%
    );
  }
  html:not([data-reduced-effects="on"]) .tile:hover::after {
    opacity: 1;
  }
  html:not([data-reduced-effects="on"]) .tile > * {
    position: relative;
    z-index: 1;
  }
}
.tile .folder {
  width: 62px;
  height: 62px;
}
.tile small {
  display: block;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 12px;
  margin-top: 3px;
}
.project-main {
  padding: 14px;
  overflow: auto;
  min-width: 0;
}
.search {
  width: 100%;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.2);
  color: var(--text);
  padding: 0 12px;
  margin-bottom: 14px;
  outline: 0;
}
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.card {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  min-height: 120px;
  padding: 12px;
  cursor: pointer;
  transition: var(--motion-focus);
  position: relative;
  overflow: hidden;
}
.card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--kyr-accent-2) 40%, transparent);
  box-shadow: var(--elev-raised);
}
.card h3 {
  margin: 0 0 4px;
  font-size: 14px;
}
.card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}
.card i {
  display: block;
  width: 66px;
  height: 3px;
  background: var(--kyr-accent);
  border-radius: 99px;
  margin-top: 13px;
}
.toolbar,
.statusbar {
  height: 34px;
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.1);
}
.pink {
  color: var(--pink);
  font-weight: 700;
}
.statusbar {
  height: auto;
  justify-content: flex-end;
  border-top: 1px solid var(--line);
  border-bottom: 0;
  padding: 6px 12px;
  font-size: 11px;
}
.concept-grid {
  padding: 20px;
  display: grid;
  gap: 12px;
}
.concept-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.035);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition:
    transform var(--motion-focus),
    border-color var(--motion-focus),
    box-shadow var(--motion-focus);
}
.pill {
  border: 1px solid rgba(102, 247, 255, 0.25);
  color: var(--cyan);
  border-radius: 99px;
  padding: 4px 9px;
  font-size: 11px;
}
.calc {
  padding: 16px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(0, 0, 0, 0.18));
}
.display {
  min-height: 68px;
  background: linear-gradient(145deg, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.045));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 22px;
  padding: 18px;
  text-align: right;
  margin-bottom: 10px;
  box-shadow: inset 0 2px 16px rgba(0, 0, 0, 0.35);
}
.exp {
  color: var(--muted);
  font-size: 13px;
  min-height: 18px;
}
.res {
  font-size: 34px;
  color: var(--cream);
  font-weight: 700;
}
.keys {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.keys button {
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.045));
  color: var(--text);
  cursor: pointer;
  font-size: 15px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 8px 16px rgba(0, 0, 0, 0.22);
  font-family: var(--font-body);
  font-weight: 700;
  transition:
    transform var(--motion-focus),
    box-shadow var(--motion-focus),
    background var(--motion-focus);
}
.keys button:hover {
  background: rgba(255, 255, 255, 0.12);
}
.keys .op {
  color: var(--cream);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--blue) 35%, rgba(255, 255, 255, 0.12)),
    rgba(255, 255, 255, 0.05)
  );
}
.keys .eq {
  background: linear-gradient(180deg, var(--pink), var(--pink2));
  color: white;
}
.zero {
  grid-column: span 2;
}
.playerbody {
  display: grid;
  grid-template-columns: minmax(min(260px, 100%), 1.1fr) minmax(min(210px, 100%), 0.85fr);
  gap: 16px;
  padding: 16px;
  height: calc(100% - 44px);
  align-items: stretch;
}
.track {
  border-right: 1px solid var(--line);
  padding-right: 12px;
}
.tracktop {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) 88px;
  gap: 14px;
  align-items: center;
}
.cover {
  width: 86px;
  height: 86px;
  border-radius: 26px;
  background: linear-gradient(135deg, var(--pink), var(--blue)), radial-gradient(circle, #fff, transparent 30%);
  box-shadow: var(--elev-raised);
  position: relative;
  overflow: hidden;
}
.songtitle {
  font-weight: 800;
  font-size: 22px;
  color: var(--cream);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.viz {
  height: 72px;
  display: flex;
  align-items: flex-end;
  gap: 5px;
  justify-content: center;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.08);
  grid-column: 1/-1;
  min-height: 78px;
  overflow: hidden;
}
.viz span {
  width: 7px;
  background: linear-gradient(180deg, var(--cyan), var(--pink) 60%, var(--purple));
  border-radius: 999px;
  height: 18px;
  animation: none;
  animation-delay: calc(var(--h) * -30ms);
  transform: none;
  min-width: 7px;
  box-shadow: 0 0 16px color-mix(in srgb, var(--cyan) 34%, transparent);
  transition:
    height 0.08s linear,
    opacity 0.12s ease;
}
input[type="range"] {
  accent-color: var(--pink);
}
.controls {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 16px 0;
  align-items: center;
}
.controls button,
.playlist button {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  border-radius: 8px;
  cursor: pointer;
  height: 32px;
  min-width: 32px;
}
.play {
  width: 42px;
  height: 42px;
  border-radius: 50%;
}
.volume {
  display: flex;
  grid-template-columns: 20px 1fr 20px;
  gap: 10px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
  margin-top: auto;
  padding-top: 10px;
}
.playlist h4 {
  margin: 0 0 9px;
  font-size: 12px;
  letter-spacing: 0.12em;
  font-family: var(--font-body);
  color: var(--muted);
}
.song {
  display: grid;
  grid-template-columns: 22px 1fr 42px;
  gap: 7px;
  align-items: center;
  padding: 7px 8px;
  border-radius: 7px;
  font-size: 12px;
  cursor: pointer;
}
.song:hover,
.song.active {
  background: rgba(57, 164, 255, 0.18);
}
.contact form {
  padding: 14px;
  display: grid;
  gap: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 18px;
  box-shadow: var(--elev-desktop);
}
.contact input,
.contact textarea {
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(2, 7, 16, 0.52);
  color: var(--text);
  border-radius: 13px;
  padding: 11px 12px;
  width: 100%;
  font-family: var(--sans);
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  font: 500 14px/1.32 var(--sans);
  text-transform: none;
  letter-spacing: 0;
}
.contact form button {
  border: 0;
  border-radius: 13px;
  padding: 11px 14px;
  background: var(--kyr-accent-2);
  color: #04222a;
  font-weight: 900;
  cursor: pointer;
  transition: var(--motion-focus);
}
.scrap-grid {
  padding: 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 13px;
}
.scrap-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.035);
  min-height: 110px;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  gap: 10px;
  cursor: pointer;
  transition: var(--motion-focus);
}
.scrap-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--kyr-accent-2) 36%, transparent);
  box-shadow: var(--elev-raised);
}
.scrap-card small {
  color: var(--muted);
  font-size: 11px;
}
.home-section-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(200, 218, 238, 0.12);
}
.home-section-title h1 {
  margin: 0 0 6px;
  font: 700 clamp(26px, 3vw, 34px) / 1.12 var(--font-display);
  letter-spacing: -0.015em;
  color: var(--text);
}
.home-section-title p {
  margin: 0;
  max-width: 60ch;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}
.ghost-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(200, 218, 238, 0.22);
  background: rgba(255, 255, 255, 0.045);
  color: var(--muted);
  border-radius: 999px;
  padding: 9px 15px;
  font: 700 12px/1 var(--font-body);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition:
    color var(--motion-focus),
    border-color var(--motion-focus),
    background var(--motion-focus),
    transform var(--motion-focus);
}
.ghost-btn:hover {
  color: var(--text);
  border-color: rgba(125, 216, 247, 0.5);
  background: rgba(15, 26, 43, 0.6);
}
.folder:before,
.folder:after {
  display: none;
  content: none;
}
/* FW-1.4: one folder geometry for every folder - variant classes no longer
   swap in different art, and they no longer re-tint the glyph (one dialect,
   one ink; accent only where it carries meaning). */
.folder.purple,
.folder.blue,
.folder.cyan {
  color: color-mix(in srgb, var(--cyan) 58%, var(--cream));
}
.scrap-card .folder {
  width: 58px;
  height: 58px;
}
.resize-grip {
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 18px;
  height: 18px;
  z-index: 8;
  cursor: nwse-resize;
  opacity: 0.58;
  background:
    linear-gradient(135deg, transparent 0 43%, rgba(180, 214, 255, 0.24) 44% 52%, transparent 53%),
    linear-gradient(135deg, transparent 0 61%, rgba(180, 214, 255, 0.42) 62% 70%, transparent 71%),
    linear-gradient(135deg, transparent 0 78%, rgba(180, 214, 255, 0.7) 79% 87%, transparent 88%);
  border-radius: 0 0 10px 0;
}
.resize-grip:hover {
  opacity: 1;
  filter: drop-shadow(0 0 8px rgba(102, 247, 255, 0.35));
}
.win.resizing {
  transition: none;
  user-select: none;
}
.dock {
  position: fixed;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  gap: 13px;
  height: 78px;
  padding: 12px 16px 14px;
  z-index: 900;
  overflow: visible;
  isolation: isolate;
}
.dock button {
  --dock-scale: 1;
  --dock-lift: 0;
  --dock-space: 0;
  width: 52px;
  height: 52px;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: none;
  color: var(--text);
  cursor: pointer;
  font-size: 24px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: visible;
  transform-origin: bottom center;
  z-index: calc(10 + var(--dock-z));
  --dock-z: 0;
  margin-inline: calc(var(--dock-space) * 1px);
  margin-top: auto;
}
.dock button.launch-pulse {
  animation: none;
}
.dock svg {
  width: 25px;
  height: 25px;
  overflow: visible;
}
.concepts .concept-grid {
  position: relative;
  padding-top: 20px;
  overflow: auto;
  height: calc(100% - 36px);
  padding-right: 18px;
}
.concept-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--kyr-accent-2) 36%, transparent);
  box-shadow: var(--elev-raised);
}
.trash-detail {
  width: 460px;
  height: auto;
  left: 38%;
  top: 22%;
}
.trash-detail-body {
  padding: 18px;
  display: grid;
  gap: 8px;
}
.trash-detail-body h3 {
  margin: 0;
  font-size: 20px;
}
.trash-detail-body .muted {
  margin-top: -4px;
}
.trash-detail-body p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;
}
.trash-detail-images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
  margin: 6px 0 2px;
}
.trash-detail-images img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
}
.trash-card-title {
  cursor: pointer;
}
.trash-card-title:hover {
  color: var(--cyan);
}
.concept-detail {
  width: 420px;
  height: auto;
  left: 42%;
  top: 24%;
}
.concept-detail .detail-body {
  padding: 18px;
  display: grid;
  gap: 10px;
}
.concept-detail h3 {
  margin: 0;
  font-size: 20px;
}
.concept-detail p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;
}
.detail-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.detail-tags span {
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(102, 247, 255, 0.22);
  font-size: 11px;
  color: var(--cyan);
  background: rgba(102, 247, 255, 0.06);
}
.mini-player {
  position: fixed;
  right: 20px;
  bottom: 112px;
  width: min(340px, calc(100vw - 24px));
  z-index: 42;
  padding: 10px 11px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(8, 13, 24, 0.78));
  backdrop-filter: blur(28px) saturate(1.35);
  box-shadow: var(--elev-raised);
  overflow: hidden;
  transform-origin: 90% 100%;
  pointer-events: auto;
}
.mini-player > * {
  position: relative;
  z-index: 1;
}
.mini-player.hidden {
  display: none;
}
.mini-player.showing {
  animation: miniIn var(--motion-enter) both;
}
.mini-player.restoring {
  animation: miniOut var(--motion-dismiss) forwards;
}
.mini-head {
  display: grid;
  align-items: center;
  gap: 8px;
  grid-template-columns: 48px minmax(0, 1fr) 38px;
}
.mini-cover {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--pink), var(--blue));
  box-shadow: var(--elev-raised);
  position: relative;
  overflow: hidden;
}
.mini-cover::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 6px solid rgba(3, 8, 17, 0.42);
  border-radius: 50%;
  box-shadow: none;
  background: radial-gradient(circle, #f8e9ca 0 12%, transparent 13%);
}
.mini-copy {
  min-width: 0;
  flex: 1;
}
.mini-kicker {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--cyan);
  margin-bottom: 2px;
}
.mini-title {
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--cream);
}
.mini-sub {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mini-restore {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border-radius: 10px;
  min-width: 30px;
  height: 28px;
  cursor: pointer;
  font-size: 13px;
}
.mini-restore:hover {
  background: rgba(102, 247, 255, 0.13);
  border-color: rgba(102, 247, 255, 0.28);
}
.mini-progress {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  gap: 8px;
  align-items: center;
  margin: 12px 0;
  color: var(--muted);
  font-size: 11px;
  font-family: var(--font-body);
  margin-top: 7px;
}
.mini-progress input {
  width: 100%;
  accent-color: var(--cyan);
}
.mini-controls {
  display: grid;
  align-items: center;
  justify-content: center;
  gap: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 8px;
  grid-auto-flow: column;
  white-space: nowrap;
  overflow: visible;
}
.mini-controls button {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  cursor: pointer;
  flex: 1;
  min-width: 34px;
  max-width: 34px;
  min-height: 34px;
  max-height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
}
.mini-controls button:hover {
  background: rgba(255, 255, 255, 0.12);
}
.mini-stop {
  color: var(--pink);
}
.mini-note {
  margin-top: 8px;
  text-align: center;
  color: #738399;
  font-size: 10px;
  letter-spacing: 0.05em;
}
.clock {
  border-left: 0;
  padding-left: 14px;
  min-width: 104px;
  text-align: right;
  color: var(--cream-soft);
}
.clock b {
  font-size: 17px;
  font-weight: 500;
  font-family: var(--font-body);
}
.clock small {
  display: block;
  color: var(--muted);
  font-size: 11px;
}
.toast {
  position: fixed;
  right: 16px;
  bottom: auto;
  padding: 12px 16px 12px 52px;
  background: rgba(18, 24, 36, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  opacity: 0;
  transform: translateX(24px) translateY(-8px) scale(0.98);
  /* Scoped, not `all`: scrollbar-color flips when the calm theme lands at
     load and must never animate (it kept "landing at rest" red). */
  transition:
    opacity var(--motion-enter),
    transform var(--motion-enter),
    visibility var(--motion-enter);
  z-index: 1200;
  box-shadow: var(--elev-raised);
  backdrop-filter: blur(20px);
  font-weight: 650;
  top: 52px;
  min-width: 280px;
  max-width: 360px;
  pointer-events: none;
}
.toast.show {
  opacity: 1;
  transform: translateX(0) translateY(0) scale(1);
  animation: linuxToastIn var(--motion-enter) both;
}
#home .main {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
  overflow: visible;
  min-width: 0;
  padding: clamp(16px, 3.2cqw, 28px);
  scrollbar-gutter: auto;
  padding-bottom: clamp(48px, 8cqw, 76px);
}
#home .concept-grid {
  padding-bottom: 28px;
}
.dock button svg {
  overflow: visible;
}
#home .tiles {
  grid-template-columns: repeat(auto-fit, minmax(min(118px, 100%), 1fr));
  gap: 14px;
  align-items: stretch;
  max-width: 100%;
}
#home .tile {
  min-width: 0;
  width: 100%;
  overflow: hidden;
  min-height: clamp(106px, 18cqw, 142px);
  padding: clamp(12px, 2.2cqw, 18px) 10px;
  gap: 10px;
}
#home .tile b,
#home .tile small {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
#home .tile .folder {
  width: 58px;
  height: 58px;
}
#home .tile .doc,
#home .tile .mail {
  transform: scale(0.92);
}
#home .home-section-title {
  flex-wrap: wrap;
}
.trash:before,
.trash:after {
  display: none;
}
body.theme-pink {
  --pink: #ff6fb1;
  --pink2: #d9468f;
  --purple: #c084fc;
  --blue: #ff9fd2;
  --cyan: #ffb7df;
  --line-strong: rgba(255, 140, 200, 0.32);
  --accent-gradient: linear-gradient(135deg, #ff8cc8, #c084fc);
  --linux-accent: #d9468f;
  --linux-accent-2: #ff8cc8;
  --dock-accent-default: #ff8cc8;
}
body.theme-cyan {
  --pink: #39d7ff;
  --pink2: #1aa8e8;
  --purple: #74b8ff;
  --blue: #58b7ff;
  --cyan: #72f3ff;
  --line-strong: rgba(114, 243, 255, 0.32);
  --accent-gradient: linear-gradient(135deg, #72f3ff, #58b7ff);
  --linux-accent: #1c9bd6;
  --linux-accent-2: #62d0f7;
  --dock-accent-default: #62d0f7;
}
body.theme-green {
  --pink: #85f27f;
  --pink2: #39ca70;
  --purple: #47e985;
  --blue: #78ffd2;
  --cyan: #9affc5;
  --line-strong: rgba(168, 255, 149, 0.32);
  --accent-gradient: linear-gradient(135deg, #a8ff95, #47e985);
  --linux-accent: #2ec27e;
  --linux-accent-2: #8ff0a4;
  --dock-accent-default: #8ff0a4;
}
body.theme-amber {
  --pink: #ffd66b;
  --pink2: #ff9a3d;
  --purple: #ffbd66;
  --blue: #ffe08a;
  --cyan: #fff1a8;
  --line-strong: rgba(255, 224, 138, 0.34);
  --accent-gradient: linear-gradient(135deg, #ffe08a, #ffad66);
  --linux-accent: #e5a50a;
  --linux-accent-2: #f9d65b;
  --dock-accent-default: #f9d65b;
}
html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
h1,
h2,
h3,
.brand,
.songtitle,
.home-section-title h1,
.case-hero h2 {
  font-family: var(--display);
  letter-spacing: -0.035em;
}
/* FW-1.2 role lock: mono is for code alone. The small UI voices that used to
   ride this rule (status bars, toolbars, pills, chips, search, the calculator
   readouts, the widget clock) are Atkinson now - mono is not the default
   voice of the shell. */
code,
kbd,
.kbd {
  font-family: var(--font-mono);
}
.statusbar,
.toolbar,
.clock,
.pill,
.mini-kicker,
.tag,
.filter-chip,
.search,
.display,
.res,
.exp {
  font-family: var(--font-body);
}
.wallpaper::after {
  background:
    linear-gradient(to top, rgba(1, 5, 12, 0.7), rgba(1, 5, 12, 0.18) 52%, rgba(1, 5, 12, 0.02)),
    radial-gradient(circle at 50% 38%, transparent 0 38%, rgba(0, 0, 0, 0.22) 100%);
}
.menu {
  gap: 10px;
  color: rgba(238, 245, 255, 0.78);
  font-weight: 600;
}
.menu span {
  padding: 5px 9px;
  border-radius: 999px;
  transition: var(--motion-focus);
}
.menu span:hover {
  background: rgba(255, 255, 255, 0.09);
  color: var(--cream);
}
.system {
  gap: 12px;
  align-items: center;
  color: rgba(238, 245, 255, 0.82);
}
.system span,
.system button {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.055);
  border-radius: 999px;
  padding: 5px 9px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.folder,
.mail,
.doc,
.trash,
.resume-doc,
.music-folder {
  filter: drop-shadow(0 13px 20px rgba(0, 0, 0, 0.36));
}
.win::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}
.bar > span:not(.title) {
  color: rgba(255, 255, 255, 0.64);
  font: var(--type-winmeta);
  letter-spacing: var(--type-winmeta-ls);
}
.bar .bar-glyphs {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.win-controls button,
.quick-close,
.ghost-btn,
.hero-actions button,
.controls button,
.playlist button,
.mini-controls button,
.mini-restore {
  color: var(--text);
  border-radius: 12px;
  transition: var(--motion-focus);
}
.win-controls button:hover,
.quick-close:hover,
.ghost-btn:hover,
.hero-actions button:hover,
.controls button:hover,
.playlist button:hover,
.mini-controls button:hover,
.mini-restore:hover {
  background: rgba(255, 255, 255, 0.13);
  border-color: var(--line-strong);
}
.main > p {
  font-size: 18px;
  color: var(--muted);
  max-width: 58ch;
}
.tiles,
.grid,
.concept-grid,
.scrap-grid {
  gap: 16px;
}
.tile,
.project-card,
.concept-card,
.scrap-card,
.hero-card,
.proof-card,
.project-summary,
.case-panel,
.shortcut-list,
.settings-panel,
.command-item {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.03));
  box-shadow: var(--elev-desktop);
}
.tile:hover,
.project-card:hover,
.concept-card:hover,
.scrap-card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--kyr-accent-2) 36%, transparent);
  box-shadow: var(--elev-raised);
}
.tile b,
.project-card b,
.concept-card b {
  font-weight: 800;
  color: var(--cream);
}
.tile small,
.project-card small,
.concept-card small {
  color: var(--muted);
}
.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
  gap: 18px;
  margin-bottom: 20px;
}
.hero-card {
  padding: 26px;
  min-height: 220px;
}
.hero-card h1 {
  font-size: clamp(36px, 5vw, 64px);
  line-height: 0.92;
  margin: 0 0 14px;
  background: linear-gradient(110deg, var(--cream), #fff 40%, var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-card p,
.proof-card p,
.case-muted {
  color: var(--muted);
  line-height: 1.65;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.hero-actions button {
  padding: 10px 14px;
  font-weight: 800;
}
.proof-card {
  padding: 20px;
  display: grid;
  gap: 12px;
}
.folder-note {
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.045);
  padding: 12px 14px;
  color: var(--muted);
  margin-bottom: 14px;
}
.search,
input,
textarea {
  background: rgba(3, 8, 16, 0.46);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 14px;
  color: var(--text);
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: var(--motion-focus);
}
.search:focus,
input:focus,
textarea:focus {
  border-color: color-mix(in srgb, var(--kyr-accent-2) 44%, rgba(255, 255, 255, 0.16));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kyr-accent-2) 18%, transparent);
}
.filter-chip,
.pill,
.tag {
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  border-radius: 999px;
  padding: 8px 11px;
}
.filter-chip.active,
.pill {
  color: var(--cream);
  border-color: var(--line-strong);
  background: color-mix(in srgb, var(--pink) 18%, rgba(255, 255, 255, 0.06));
}
.case-study {
  /* FW-2.1: a reading surface wants a generous measure and most of the
     viewport, not a modest utility-window footprint. */
  width: min(920px, calc(100vw - 36px));
  height: min(86vh, calc(100vh - 36px));
}
.case-body {
  padding: 22px;
  overflow: auto;
  height: calc(100% - 44px);
}
.case-hero {
  padding: 24px;
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 255, 255, 0.13);
  margin-bottom: 16px;
}
.case-hero h2 {
  font-size: 42px;
  margin: 10px 0;
  color: var(--cream);
}
.case-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.case-panel {
  padding: 18px;
}
.case-panel h3 {
  margin-top: 0;
  color: var(--cream);
}
.keys button:active {
  transform: translateY(2px) scale(0.98);
  box-shadow:
    inset 0 2px 12px rgba(0, 0, 0, 0.3),
    0 3px 8px rgba(0, 0, 0, 0.18);
}
.track,
.playlist {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.028));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  padding: 16px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.cover,
.mini-cover {
  background:
    radial-gradient(circle at 30% 26%, var(--cream), transparent 20%),
    linear-gradient(135deg, var(--pink), var(--purple) 52%, var(--cyan));
  border-radius: 22px;
  box-shadow: var(--elev-raised);
}
.controls button {
  width: 46px;
  height: 42px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  padding: 0;
}
.controls .play {
  width: 56px;
  background: linear-gradient(180deg, var(--pink), var(--pink2));
  color: white;
}
#playlist > div {
  padding: 10px;
  border-radius: 12px;
  transition: var(--motion-focus);
}
#playlist > div:hover,
#playlist .active {
  background: color-mix(in srgb, var(--pink) 14%, rgba(255, 255, 255, 0.05));
  color: var(--cream);
}
.mini-sub,
.mini-note,
.mini-kicker {
  color: var(--muted);
  font-size: 12px;
}
.mini-play {
  background: linear-gradient(180deg, var(--pink), var(--pink2));
  color: white;
}
.contact textarea {
  resize: vertical;
  min-height: 108px;
}
.contact form button:hover {
  transform: translateY(-2px);
  filter: saturate(1.12) brightness(1.04);
}
.settings {
  width: min(560px, calc(100vw - 32px));
  height: min(640px, calc(100vh - 116px));
}
.settings-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  height: calc(100% - 42px);
  overflow-y: auto;
}
.settings-panel {
  padding: 18px;
}
.settings-panel h3 {
  margin: 0 0 8px;
  color: var(--cream);
}
/* WS-13 - settings backup/restore buttons */
.settings-io-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.settings-io-btn {
  width: auto;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink, #e7f1ff);
  cursor: pointer;
  font-size: 13px;
  transition:
    background var(--motion-focus),
    border-color var(--motion-focus);
}
.settings-io-btn:hover {
  background: rgba(114, 243, 255, 0.1);
  border-color: rgba(114, 243, 255, 0.35);
}
.theme-swatches {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.theme-swatches button {
  width: auto;
  min-width: 60px;
  height: auto;
  padding: 6px 10px 8px;
  border-radius: 14px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: var(--motion-focus);
  position: relative;
  overflow: hidden;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-size: 11px;
  line-height: 1.2;
}
.theme-swatches button:hover {
  transform: translateY(-2px) scale(1.04);
  border-color: rgba(255, 255, 255, 0.35);
}
.theme-swatches .swatch-preview {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--swatch-c1), var(--swatch-c2));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  flex-shrink: 0;
}
.theme-swatches .swatch-label {
  display: block;
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.command-palette {
  width: min(720px, calc(100vw - 32px));
  left: 50%;
  top: 76px;
  transform: translateX(-50%);
}
.command-body {
  padding: 16px;
}
.command-body input {
  width: 100%;
  padding: 15px 16px;
  margin-bottom: 12px;
  font-size: 16px;
}
.command-list {
  display: grid;
  gap: 8px;
  max-height: 390px;
  overflow: auto;
}
.command-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  cursor: pointer;
}
.command-item.active,
.command-item:hover {
  border-color: var(--line-strong);
  /* FW-1.R: shell hover is the sky accent - pink was an FW-1.3 escapee. */
  background: color-mix(in srgb, var(--fw-accent) 12%, rgba(255, 255, 255, 0.05));
}
/* FW-1.4: palette row anatomy - icon plinth, left-aligned copy, kbd meta.
   These classes previously had no rules at all, so title and sub ran
   together as one centred line. */
.spot-icon {
  flex: none;
  width: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fw-paper-72);
}
.spot-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}
.spot-title {
  color: var(--fw-paper);
  font-size: 14.5px;
  line-height: 1.25;
}
.spot-sub {
  color: var(--fw-paper-55);
  font-size: 12.5px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.spot-meta {
  flex: none;
  margin-left: auto;
}
.kbd {
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(0, 0, 0, 0.18);
  color: var(--cream);
}
.about-os .main,
.shortcuts .main {
  padding: 20px;
}
.muted {
  color: var(--muted);
}
.win button:not([data-close]):not([data-min]):not([data-max]):not(.music-library-file),
.hero-actions button,
.card-footer button,
.copy-experience,
.filter-chip,
#playlist button,
.controls button,
.mini-controls button,
.mini-restore,
.contact form button {
  appearance: none;
  border: 1px solid rgba(200, 218, 238, 0.16);
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.028));
  color: var(--text);
  font: 700 13px/1 var(--sans);
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition:
    transform var(--motion-focus),
    border-color var(--motion-focus),
    background var(--motion-focus),
    box-shadow var(--motion-focus),
    filter var(--motion-focus);
}
.win button:not([data-close]):not([data-min]):not([data-max]):hover,
.hero-actions button:hover,
.card-footer button:hover,
.copy-experience:hover,
.filter-chip:hover,
#playlist button:hover,
.controls button:hover,
.mini-controls button:hover,
.mini-restore:hover,
.contact form button:hover {
  border-color: rgba(125, 216, 247, 0.45);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--kyr-accent) 16%, rgba(255, 255, 255, 0.1)),
    rgba(255, 255, 255, 0.045)
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 8px 22px rgba(0, 0, 0, 0.32);
}
.hero-actions button:first-child,
.controls .play,
.mini-play,
.contact form button {
  background: linear-gradient(180deg, rgba(125, 216, 247, 0.95), rgba(46, 163, 217, 0.95));
  border-color: transparent;
  color: #032430;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 8px 24px rgba(28, 155, 214, 0.32);
}
.sound-toggle,
#dateText {
  cursor: pointer;
  user-select: none;
  border-radius: 9px;
  padding: 3px 6px;
}
.sound-toggle:hover,
#dateText:hover {
  background: rgba(255, 255, 255, 0.1);
}
#seek {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 18px 0 8px;
}
.volume input {
  min-width: 0;
  flex: 1;
}
#playlist {
  display: grid;
  gap: 8px;
  overflow: auto;
  padding-right: 3px;
}
#playlist > div {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: 10px;
}
.playlist p {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: auto 0 0;
  padding-top: 12px;
}
.playlist p button {
  width: 36px;
  height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
}
.mini-title,
.mini-sub {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mini-controls button,
.mini-restore {
  min-width: 0;
  padding: 0;
  display: grid;
  place-items: center;
  height: 30px;
  min-height: 30px;
  border-radius: 10px;
  font-size: 13px;
}
.contact input::placeholder,
.contact textarea::placeholder {
  color: color-mix(in srgb, var(--muted) 84%, transparent);
}
.contact input:focus,
.contact textarea:focus {
  border-color: color-mix(in srgb, var(--kyr-accent-2) 44%, rgba(255, 255, 255, 0.16));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kyr-accent-2) 18%, transparent);
}
.contact a,
.contact a:visited {
  color: var(--cyan);
  text-decoration: none;
}
.contact form::before {
  content: "Let’s build something polished.";
  color: var(--cream);
  font: 850 20px/1.1 var(--display);
  letter-spacing: -0.03em;
}
.contact form::after {
  content: "Prefer email? Use the copy-email action.";
  color: var(--muted);
  font-size: 12px;
  margin-top: -4px;
}

/* JS tooltip ownership only (#dockLabel): suppress pseudo-element tooltips on
   dock buttons. The .launch-pulse ::before is exempt - it is not a tooltip
   but the Launchbat's meridian launch flash (see the canonical dock block). */
#dock button[data-tip]:not(.launch-pulse)::before,
#dock button.active[data-tip]:not(.launch-pulse)::before,
#dock button[data-tip]:not(.active)::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
#dock button[data-tip]:not(.launch-pulse):hover::before,
#dock button[data-tip]:not(.launch-pulse):focus-visible::before,
#dock button.active[data-tip]:not(.launch-pulse):hover::before,
#dock button.active[data-tip]:not(.launch-pulse):focus-visible::before {
  opacity: 0 !important;
  transform: none !important;
}
#experience .toolbar {
  gap: 10px;
}
#experience .toolbar span:not(:first-child),
#experience .toolbar-icon.copy-md {
  appearance: none;
  background: none;
  box-shadow: none;
  min-width: 26px;
  height: 24px;
  padding: 0 8px;
  display: inline-grid;
  place-items: center;
  color: var(--muted);
  font: 700 12px/1 var(--font-body);
}
#experience .toolbar-icon.copy-md {
  appearance: none;
  cursor: pointer;
  margin-left: 0;
  line-height: 1;
  transition:
    background var(--motion-focus),
    border-color var(--motion-focus),
    color var(--motion-focus),
    transform var(--motion-focus);
}
#experience .toolbar-icon.copy-md:hover,
#experience .toolbar-icon.copy-md.copied {
  transform: translateY(-1px);
  color: var(--text);
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.09);
}
#home.home {
  width: min(940px, calc(100vw - 44px));
  height: min(668px, calc(100vh - 110px));
}
#home .layout {
  /* The cap was 150px, which left the label cell at exactly 82px - the width
     "Recent Work" needs to the pixel, so rounding tipped it onto a second line.
     A wrapped nav item breaks the rhythm of the list and leaves its glyph
     centred against two lines of text. ~14px of headroom fixes it; the label
     itself is also pinned to one line below, so a narrow container truncates
     rather than wraps. ★ */
  /* Floor raised from 118px: the labels are pinned to one line with an
     ellipsis, so a rail narrower than ~150px started truncating "Recent Work"
     - and the container query hides the rail entirely below 560px anyway, so
     the truncating band existed only to look broken. */
  grid-template-columns: clamp(152px, 20cqw, 164px) minmax(0, 1fr);
  overflow: auto;
  align-items: start;
  scrollbar-gutter: stable both-edges;
}
#home .home-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: stretch;
  margin-bottom: 22px;
}
#home .hero-card {
  min-height: clamp(220px, 42cqw, 308px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px;
}
#home .hero-card h1 {
  font-size: clamp(46px, 6vw, 62px);
  line-height: 0.94;
  max-width: 9ch;
  margin-bottom: 18px;
}
.controls,
.volume {
  align-items: center;
}
.tile::before,
.project-card::before,
.concept-card::before,
.hero-card::after,
.proof-card::after,
.settings-panel::after {
  animation: none;
}
.win .win-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 6px;
}
/* FW-2.3: the decorative pink/cyan radials are retired - the contact surface
   is quiet; the address is the focal point. */
.contact-shell {
  height: calc(100% - 44px);
  overflow: auto;
}
.contact-intro {
  display: grid;
  gap: 6px;
  padding: 2px 2px 0;
}
.contact-kicker {
  margin: 0;
  color: var(--cyan);
  font: 850 12px/1 var(--display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.contact-copy {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
  max-width: 48ch;
}
.contact form::before,
.contact form::after {
  content: none;
  display: none;
}
.contact label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font: 700 11px/1.2 var(--font-body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.player-redesign {
  grid-template-columns: minmax(300px, 1.1fr) minmax(240px, 0.9fr);
  gap: 14px;
  padding: 16px;
  display: grid;
  grid-template-rows: 1fr;
  min-height: 0;
}
.music-console,
.music-queue {
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(3, 8, 17, 0.48));
  box-shadow: var(--elev-desktop);
}
.music-head {
  grid-template-columns: 86px 1fr;
  gap: 12px;
  display: grid;
  align-items: center;
}
.track-copy {
  min-width: 0;
}
.cover::after {
  content: "";
  position: absolute;
  inset: 16px;
  border-radius: 50%;
  border: 10px solid rgba(3, 8, 17, 0.42);
  background: radial-gradient(circle, #f8e9ca 0 12%, transparent 13%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.music-progress {
  margin: 20px 0 8px;
}
.music-time {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 12px;
}
#seek,
#miniSeek,
#volume {
  accent-color: var(--pink);
}
.music-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 18px 0;
}
.music-controls button {
  width: 46px;
  height: 42px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  padding: 0;
}
.music-controls .play {
  width: 60px;
  height: 52px;
  border-radius: 20px;
  background: linear-gradient(180deg, var(--pink), var(--pink2));
  color: #fff;
}
.music-volume {
  display: grid;
  grid-template-columns: 24px 1fr 24px;
  gap: 10px;
  margin: 0;
  padding: 0;
}
#playlist .song {
  display: grid;
  grid-template-columns: 26px minmax(0, 1.3fr) minmax(0, 0.9fr);
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid transparent;
  cursor: pointer;
}
#playlist .song span:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#playlist .song .song-mood {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
  font-size: 11px;
  opacity: 0.62;
  font-family: var(--font-body);
}
.synth-badge {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cyan, #72f3ff);
  border: 1px solid color-mix(in srgb, var(--cyan, #72f3ff) 45%, transparent);
  background: color-mix(in srgb, var(--cyan, #72f3ff) 12%, transparent);
}
.playlist-note {
  margin: 10px 0 0;
  font-size: 11.5px;
  opacity: 0.7;
}
#playlist .song.active {
  border-color: var(--line-strong);
  background: color-mix(in srgb, var(--pink) 16%, rgba(255, 255, 255, 0.06));
  color: var(--cream, #f8e9ca);
}

.music-library-body {
  height: calc(100% - 44px);
  min-height: 0;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}
.music-library-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 32px;
}
.music-library-status {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.01em;
}
.music-library-toolbar button {
  height: 30px;
  min-width: 82px;
  padding: 0 11px;
  border-radius: 11px;
  font-size: 12px;
}
.music-library-grid {
  min-height: 0;
  overflow: auto;
  flex: 1;
  padding-right: 3px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
  gap: 12px;
  align-content: start;
  align-items: start;
}
.music-library-file {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 16px;
  padding: 10px 8px;
  color: var(--text);
  min-height: 134px;
  text-align: center;
  cursor: pointer;
  display: grid;
  gap: 8px;
  align-content: start;
  justify-items: center;
  transition: var(--motion-focus);
}
.music-library-file:hover {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  transform: translateY(-3px) scale(1.02);
  filter: none;
  animation: none;
}
.music-library-file:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--cyan) 65%, transparent);
  outline-offset: 2px;
}
.music-library-file-icon {
  width: 58px;
  height: auto;
  max-height: 58px;
  border: none;
  border-radius: 8px;
  display: block;
  object-fit: contain;
  filter: none;
  transition: var(--motion-focus);
}
.music-library-file:hover .music-library-file-icon {
  transform: none;
  filter: none;
  will-change: transform;
}
.music-library-file-label {
  width: 100%;
  max-width: 124px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: 0.01em;
  color: rgba(244, 249, 255, 0.96);
  border-radius: 11px;
  padding: 5px 10px 6px;
  background: rgba(7, 12, 22, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  margin: 0 auto;
  min-height: 25px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.music-library-file:hover .music-library-file-label {
  border-color: transparent;
  background: rgba(7, 12, 22, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.music-library-empty {
  grid-column: 1/-1;
  border: 1px dashed var(--line);
  color: var(--muted);
  border-radius: 14px;
  padding: 14px;
  font-size: 12px;
}

.playlist-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: auto 0 0;
  padding-top: 12px;
}
.playlist-actions button {
  width: 38px;
  height: 36px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  padding: 0;
}
.mini-copy .mini-kicker {
  font-size: 10px;
  letter-spacing: 0.09em;
}
.mini-copy .mini-title {
  font-size: 13px;
  line-height: 1.15;
}
.mini-copy .mini-sub {
  font-size: 11px;
}
.tile::before,
.project-card::before,
.concept-card::before,
.hero-card::after,
.proof-card::after,
.settings-panel::after,
.command-item::before,
.case-panel::before,
.project-summary::before {
  content: none;
  display: none;
  animation: none;
  transition: none;
  background: none;
}
.theme-swatches button::before {
  display: none;
}
.theme-swatches button[aria-pressed="true"] {
  border-color: rgba(255, 255, 255, 0.85);
  outline: 1px solid rgba(255, 255, 255, 0.65);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12);
}
.theme-swatches button[aria-pressed="true"] .swatch-label {
  opacity: 1;
}
.projects .layout,
#home .project-shell {
  min-height: 0;
}
.project-shell,
.project-main {
  height: 100%;
  min-width: 0;
}
.project-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  min-height: 0;
  height: calc(100% - 58px);
}
.project-workbench .grid,
#projectGrid,
#homeProjectGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  align-content: start;
  min-width: 0;
  /* NOT `overflow: auto`. The pane this grid sits in already scrolls, so a
     scroller here made two nested vertical scrollbars - one at the window edge
     and a second inset at the grid's edge - and trapped the wheel in the inner
     one until it bottomed out. One scrolling ancestor per view. ★ */
  overflow: visible;
  padding: 2px 4px 8px 2px;
}
.project-workbench .card,
#projectGrid .card,
#homeProjectGrid .card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 10px;
  min-height: 210px;
  padding: 16px;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.035));
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: var(--elev-desktop);
}
.project-workbench .card h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.12;
  color: var(--cream, #f8e9ca);
  overflow-wrap: anywhere;
}
.project-workbench .card p,
.project-workbench .proof-line {
  margin: 0;
  color: var(--muted);
  line-height: 1.35;
}
.meta-row,
.card-footer,
.case-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.filter-chip {
  cursor: pointer;
}
.music-controls button,
.mini-controls button,
.playlist-actions button {
  display: grid;
  place-items: center;
}
.audio-error {
  color: var(--yellow);
  font: 700 12px/1.35 var(--font-body);
  margin-top: 8px;
}
.status .sound-toggle {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 24px;
  border-radius: 999px;
  transition:
    background var(--motion-focus),
    box-shadow var(--motion-focus),
    transform var(--motion-focus);
  cursor: pointer;
}
.status .sound-toggle.muted,
body[data-os-muted="true"] .status .sound-toggle {
  color: #ffd66b;
  background: rgba(255, 214, 107, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 214, 107, 0.28);
  opacity: 1;
}
.status .sound-toggle.muted::after,
body[data-os-muted="true"] .status .sound-toggle::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: #ff6b8d;
  transform: rotate(-38deg);
  box-shadow: 0 0 8px rgba(255, 107, 141, 0.42);
  pointer-events: none;
}
#experience .toolbar-icon.copy-md,
#experience .toolbar-icon.copy-md:hover,
#experience .toolbar-icon.copy-md.copied,
#experience .toolbar-icon.copy-md:focus {
  border: 0;
  background: transparent;
  box-shadow: none;
  outline: 0;
  padding: 0 8px;
  min-width: 26px;
  height: 24px;
  color: var(--muted);
  transform: none;
}
#experience.experience {
  display: flex;
  flex-direction: column;
  min-height: 330px;
  overflow: hidden;
}
#experience .bar,
#experience .toolbar,
#experience .statusbar {
  flex: 0 0 auto;
}
#experience .statusbar {
  position: relative;
  z-index: 3;
  margin-top: auto;
  min-height: 28px;
  height: 28px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  overflow: hidden;
  color: #c5d0df;
  background: linear-gradient(180deg, #283548, #1f2a3a);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    0 -1px 0 rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  font: var(--type-status);
  letter-spacing: var(--type-status-ls);
}
#experience .statusbar span {
  height: 100%;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  white-space: nowrap;
}
#experience .statusbar .editor-console {
  margin-right: auto;
  margin-left: 0;
  border-left: 0;
  color: #8fd6ff;
  background: rgba(0, 0, 0, 0.16);
  max-width: 52%;
  overflow: hidden;
  text-overflow: ellipsis;
}
#experience .statusbar .editor-console.warn {
  color: #ffd66b;
}
#experience .statusbar .editor-console.ok {
  color: #91ff87;
}
.locked-bubble {
  display: none;
}
.readonly-caret {
  position: absolute;
  width: 3px;
  height: 18px;
  background: #ffd66b;
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}
.readonly-caret.show {
  animation: readonlyCaretFlash 0.75s ease-out 1;
}
#player .playerbody,
#player .playerbody.player-redesign {
  /* Console slightly wider than the queue - the authored weighting. It holds
     while there is room; the @container rule below stacks them when there is
     not. A fixed two-track grid plus `overflow: hidden` used to clip nine
     elements away below ~560px - the queue was not scrolled off, it was gone -
     and the media query meant to stack them never fired, because a window can
     be dragged narrow on a wide screen. Window layout answers to the WINDOW. ★ */
  grid-template-columns: minmax(min(300px, 100%), 1.12fr) minmax(min(228px, 100%), 0.88fr);
  /* x hidden (never spill sideways), y auto (stacked panes stay reachable) */
  overflow: hidden auto;
  align-items: stretch;
  min-width: 0;
  min-height: 0;
}
@container player (max-width: 620px) {
  #player .playerbody,
  #player .playerbody.player-redesign {
    grid-template-columns: minmax(0, 1fr);
  }
}
#player .track.music-console {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
}
#player .music-head {
  flex: 0 0 auto;
}
#player .music-progress,
#player .music-controls,
#player .music-volume {
  flex: 0 0 auto;
}
#experience .line-nums,
#experience .lines,
#experience .gutter {
  overflow: hidden;
  scrollbar-width: none;
}
#experience .line-nums::-webkit-scrollbar,
#experience .lines::-webkit-scrollbar,
#experience .gutter::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
#experience.force-hidden,
#experience.hidden {
  display: none;
}
#experience.force-hidden {
  display: flex;
}
#experience.hidden {
  display: none;
}
#experience.experience:not(.hidden) {
  display: flex;
}
#player,
#player * {
  box-sizing: border-box;
}
#player .eq-zone {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-top: 10px;
  padding: 0;
  flex: 0 0 auto;
  overflow: hidden;
}
#player .eq-zone .zone-label {
  display: block;
  margin: 0 0 7px 2px;
  padding: 0;
  color: var(--muted);
  font: 700 11px/1 var(--font-body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}
#player #eqBars.ck-eq-panel {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  height: 86px;
  min-height: 86px;
  max-height: 86px;
  margin: 0;
  padding: 10px 12px 9px;
  border-radius: 18px;
  border: 1px solid rgba(155, 205, 255, 0.14);
  background: rgba(4, 9, 17, 0.48);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
#player #eqBars.ck-eq-panel .ck-eq-band {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  width: 100%;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  cursor: ns-resize;
  touch-action: none;
  user-select: none;
  transform: none;
}
#player #eqBars.ck-eq-panel .ck-eq-band:hover,
#player #eqBars.ck-eq-panel .ck-eq-band:focus-visible {
  background: transparent;
  box-shadow: none;
  transform: none;
}
#player #eqBars.ck-eq-panel .ck-eq-rail {
  position: relative;
  display: block;
  width: 12px;
  height: 50px;
  flex: 0 0 50px;
  border-radius: 999px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.04));
  box-shadow: inset 0 1px 7px rgba(0, 0, 0, 0.58);
  pointer-events: none;
}
#player #eqBars.ck-eq-panel .ck-eq-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 50%;
  min-height: 3px;
  max-height: 100%;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--green), var(--cyan) 48%, var(--pink));
  box-shadow: 0 0 11px color-mix(in srgb, var(--cyan) 35%, transparent);
  pointer-events: none;
  transition: height 0.04s linear;
}
#player #eqBars.ck-eq-panel .ck-eq-label {
  display: block;
  width: 100%;
  height: 13px;
  flex: 0 0 13px;
  margin: 0;
  padding: 0;
  color: var(--muted);
  font: 700 9px/13px var(--font-body);
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  pointer-events: none;
}
#player #eqBars.ck-eq-panel .ck-eq-band.is-active .ck-eq-rail,
#player #eqBars.ck-eq-panel .ck-eq-band:focus-visible .ck-eq-rail {
  outline: 1px solid var(--cyan);
  outline-offset: 2px;
}
.wallpaper-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--motion-panel),
    transform var(--motion-panel);
  transform: scale(1.015);
}
.wallpaper-scene-zen {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.topbar .brand {
  gap: 10px;
}
.topbar .status {
  gap: 10px;
  align-items: center;
}
.topbar .status span {
  opacity: 0.86;
}
.topbar .status span:not(.sep) {
  padding: 4px 7px;
  border-radius: 999px;
  transition:
    background var(--motion-focus),
    opacity var(--motion-focus);
}
.topbar .status span:not(.sep):hover {
  background: rgba(255, 255, 255, 0.09);
  opacity: 1;
}
.topbar .status .sep {
  height: 18px;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}
/* FW-1.3 - THE focused/unfocused pair. Unfocused windows rest at
   --elev-raised (set on .win and body.calm-effects .win); the focused window
   alone carries --elev-window plus an accent-tinted border. Title dimming for
   unfocused windows is owned by the .bar opacity rules below. */
.win.is-active,
.win.focused,
body.calm-effects .win.is-active,
body.calm-effects .win.focused {
  border-color: color-mix(in srgb, var(--kyr-accent) 45%, rgba(255, 255, 255, 0.16));
  box-shadow: var(--elev-window);
}

/* WS-2 - active-window clarity. Gently recede an inactive window's titlebar so
   the focused one reads as unmistakably active. Scoped to the titlebar (not the
   whole .win) to avoid a filter/opacity stacking context that would break the
   window's backdrop-filter and drag performance. */
.win.wm-managed:not(.is-active):not(.focused) > .bar {
  opacity: 0.66;
  transition: opacity var(--motion-focus);
}
.win.wm-managed.is-active > .bar,
.win.wm-managed.focused > .bar {
  transition: opacity var(--motion-focus);
}
html[data-reduced-motion="on"] .win.wm-managed > .bar {
  transition: none;
}
.bar button,
.bar .win-controls {
  -webkit-app-region: no-drag;
}
h1,
h2,
.home-section-title h1,
.hero-card h1 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.04em;
}
.card h3,
.concept-card b,
.proof-card b,
.settings-panel h3 {
  font-weight: 800;
  letter-spacing: -0.015em;
}
.muted,
small,
.case-muted {
  color: var(--linux-muted);
}
.dock .clock {
  position: relative;
  margin-left: 10px;
  padding-left: 18px;
  min-width: 78px;
}
.dock .clock::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: 1px 0 0 rgba(0, 0, 0, 0.25);
}
.dock .clock b {
  font-family: var(--font-body);
  font-size: 14px;
}
.toast::before {
  content: "C";
  position: absolute;
  left: 13px;
  top: 50%;
  translate: 0 -50%;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--linux-accent), #1c71d8);
  font: 900 18px/1 var(--display);
  color: white;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16) inset;
  font-family: var(--display);
}
.terminal-body,
.note-body {
  padding: 18px;
  background: rgba(5, 8, 14, 0.62);
  height: calc(100% - 40px);
  font-size: 13px;
  color: #d9ffe3;
  overflow: auto;
}
/* FW-1.2: the terminal speaks mono; a note is prose and speaks Atkinson. */
.terminal-body {
  font-family: var(--font-mono);
}
.note-body {
  font-family: var(--font-body);
}
.terminal-body .prompt {
  color: #8ff0a4;
}
.terminal-body .cmd {
  color: #99c1f1;
}
.terminal-body p {
  margin: 0 0 9px;
}
.note-body textarea {
  width: 100%;
  height: 100%;
  resize: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--text);
  padding: 14px;
  font: 500 14px/1.5 var(--sans);
  outline: none;
}
.status .sound-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
}
.status .sound-toggle.muted {
  background: rgba(237, 51, 59, 0.2);
  box-shadow:
    0 0 0 1px rgba(237, 51, 59, 0.3) inset,
    0 0 14px rgba(237, 51, 59, 0.18);
}
.status .sound-toggle.muted::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ed333b;
  box-shadow: 0 0 8px rgba(237, 51, 59, 0.72);
}
.win.notes {
  background: var(--panel);
  border: 1px solid var(--line);
}
.win.notes .note-body {
  height: calc(100% - 40px);
  padding: 12px;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: hidden;
}
.win.notes .note-body textarea {
  height: 100%;
  border: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.055);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  outline: none;
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: var(--scroll-track);
}
*::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 999px;
  /* transparent border + padding-box insets the thumb without hardcoding the
     surface colour behind it - it works on any panel it lands on. */
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-hover);
  background-clip: padding-box;
}
.dock::-webkit-scrollbar,
.dock *::-webkit-scrollbar,
.topbar::-webkit-scrollbar,
.bar::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.dock,
.topbar,
.bar {
  scrollbar-width: none;
}
.win.note-window {
  background: var(--panel);
  border: 1px solid var(--line);
  overflow: hidden;
}
.win.note-window .bar {
  height: 40px;
  min-height: 40px;
}
.win.note-window .note-body {
  height: calc(100% - 40px);
  padding: 14px;
  background: rgba(5, 8, 14, 0.42);
  border: 0;
  box-shadow: none;
  overflow: hidden;
}
.win.note-window .note-body textarea {
  display: block;
  width: 100%;
  height: 100%;
  resize: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.055);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: var(--text);
  padding: 14px;
  font: 500 14px/1.5 var(--sans);
  outline: none;
}
.win.snapped-top,
.win[data-maximized="true"] {
  overflow: hidden;
}
.win.snapped-top .bar {
  position: relative;
  z-index: 30;
}
.win.snapped-top .bar .win-controls,
.win.snapped-top .bar .win-controls button,
.win[data-maximized="true"] .bar .win-controls,
.win[data-maximized="true"] .bar .win-controls button {
  position: relative;
  z-index: 80;
  pointer-events: auto;
  -webkit-app-region: no-drag;
}
.win.snapped-top .bar .title {
  position: relative;
  z-index: 40;
}
#toast.toast,
.toast {
  pointer-events: none;
}
#toast.toast {
  top: 104px;
  z-index: 980;
}
.win[data-maximized="true"] .bar,
.win.snapped-top .bar {
  isolation: isolate;
}
.win[data-maximized="true"] .bar .win-controls,
.win.snapped-top .bar .win-controls {
  position: relative;
  z-index: 5000;
  pointer-events: auto;
}
.win[data-maximized="true"] .bar .win-controls button,
.win.snapped-top .bar .win-controls button {
  position: relative;
  z-index: 5001;
  pointer-events: auto;
}
.win.wm-managed {
  touch-action: none;
  contain: layout style;
}
.win.wm-managed .bar {
  min-height: 40px;
  cursor: grab;
  user-select: none;
  position: relative;
  z-index: 8;
}
.win.wm-managed.is-dragging .bar {
  cursor: grabbing;
}
.win.wm-managed .bar .win-controls {
  position: relative;
  z-index: 30;
  pointer-events: auto;
}
.win.wm-managed .bar .win-controls button {
  pointer-events: auto;
}
.win.wm-managed.is-maximized {
  border-radius: 16px;
  max-width: none;
  max-height: none;
}
.win.wm-managed.is-maximized .bar {
  -webkit-app-region: no-drag;
}
.win.wm-managed.is-maximized .bar .win-controls,
.win.wm-managed.is-maximized .bar .win-controls * {
  pointer-events: auto;
}
.win.wm-managed.snap-preview {
  outline: 1px solid color-mix(in srgb, var(--kyr-accent-2) 42%, transparent);
  box-shadow: var(--elev-window);
}
.win.wm-managed > .resize-grip {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 18px;
  height: 18px;
  z-index: 35;
  cursor: nwse-resize;
  pointer-events: auto;
}
.win.wm-managed > .resize-grip::before {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 8px;
  height: 8px;
  border-right: 1px solid rgba(255, 255, 255, 0.32);
  border-bottom: 1px solid rgba(255, 255, 255, 0.32);
  opacity: 0.75;
}
body.wm-dragging,
body.wm-resizing {
  cursor: grabbing;
  user-select: none;
}
body.wm-resizing {
  cursor: nwse-resize;
}
.win.notes,
.win.note-window {
  background: rgba(12, 16, 26, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.win.notes .note-body,
.win.note-window .note-body {
  padding: 14px;
  height: calc(100% - 40px);
  box-sizing: border-box;
  background: transparent;
  border: 0;
}
.win.notes textarea,
.win.note-window textarea {
  width: 100%;
  height: 100%;
  min-height: 180px;
  resize: none;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(6, 10, 18, 0.42);
  color: var(--text);
  padding: 14px;
  outline: none;
  font-family: var(--font-body);
  line-height: 1.55;
}
.wm-snap-preview {
  position: fixed;
  z-index: 42;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.985);
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--kyr-accent-2) 48%, transparent);
  background: color-mix(in srgb, var(--kyr-accent-2) 12%, transparent);
  box-shadow: var(--elev-window);
  backdrop-filter: blur(10px) saturate(1.14);
  transition:
    opacity 0.12s ease,
    transform 0.16s cubic-bezier(0.2, 0.85, 0.25, 1.08);
}
.wm-snap-preview.is-visible {
  opacity: 1;
  transform: scale(1);
}
body.wm-snap-available .win.wm-managed.snap-preview {
  outline: 1px solid color-mix(in srgb, var(--kyr-accent-2) 56%, transparent);
  box-shadow: var(--elev-window);
}

/* Half/quarter-tiled windows glide into place. The transition is scoped to
   .is-snapped so it never fires mid-drag (a dragging window is never snapped). */
.win.wm-managed.is-snapped {
  transition:
    left 0.18s cubic-bezier(0.2, 0.85, 0.25, 1),
    top 0.18s cubic-bezier(0.2, 0.85, 0.25, 1),
    width 0.18s cubic-bezier(0.2, 0.85, 0.25, 1),
    height 0.18s cubic-bezier(0.2, 0.85, 0.25, 1);
}
.win.wm-managed.is-snapped.is-dragging,
.win.wm-managed.is-snapped.is-resizing {
  transition: none;
}
html[data-reduced-motion="on"] .win.wm-managed.is-snapped {
  transition: none;
}

/* WS-1 - desktop peek: slide open windows off-screen to reveal the desktop,
   preserving all state (nothing is closed). Reduced motion collapses to an
   instant hide/show. */
body.is-peeking .win:not(.hidden) {
  transform: translateY(115vh) scale(0.97);
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--motion-panel),
    opacity var(--motion-panel);
}
body.is-peeking #miniPlayer:not(.hidden) {
  transform: translateY(160%);
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--motion-panel),
    opacity var(--motion-panel);
}
html[data-reduced-motion="on"] body.is-peeking .win:not(.hidden),
html[data-reduced-motion="on"] body.is-peeking #miniPlayer:not(.hidden) {
  transition: none;
}

/* WS-2 - in-app window switcher overlay */
.kyr-switcher {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 9, 16, 0.42);
  backdrop-filter: blur(6px) saturate(1.1);
  -webkit-backdrop-filter: blur(6px) saturate(1.1);
  animation: kyrSwitcherIn var(--motion-enter);
}
.kyr-switcher.hidden {
  display: none;
}
@keyframes kyrSwitcherIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
html[data-reduced-motion="on"] .kyr-switcher {
  animation: none;
}
.kyr-switcher-panel {
  max-width: min(92vw, 880px);
  padding: 22px 22px 16px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(8, 12, 20, 0.82)), rgba(10, 14, 23, 0.82);
  box-shadow: var(--elev-window);
}
.kyr-switcher-heading {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(238, 245, 255, 0.6);
  margin-bottom: 14px;
}
.kyr-switcher-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 100%;
  overflow-x: auto;
}
.kyr-switch-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 132px;
  padding: 16px 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(238, 245, 255, 0.9);
  cursor: pointer;
  transition:
    transform var(--motion-focus),
    border-color var(--motion-focus),
    background var(--motion-focus),
    box-shadow var(--motion-focus);
}
.kyr-switch-card:hover {
  background: rgba(255, 255, 255, 0.06);
}
.kyr-switch-card.is-active {
  border-color: color-mix(in srgb, var(--kyr-accent-2) 60%, transparent);
  background: color-mix(in srgb, var(--kyr-accent-2) 10%, transparent);
  box-shadow: var(--elev-raised);
  transform: translateY(-2px);
}
.kyr-switch-preview {
  width: 64px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(8, 12, 20, 0.6));
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.kyr-switch-preview svg {
  width: 24px;
  height: 24px;
  stroke: rgba(238, 245, 255, 0.86);
}
.kyr-switch-letter,
.kyr-switch-preview .branddock {
  font-size: 22px;
  font-weight: 700;
  color: rgba(238, 245, 255, 0.86);
}
.kyr-switch-title {
  font-size: 12.5px;
  text-align: center;
  line-height: 1.25;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.kyr-switcher-hint {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 14px;
  font-size: 11px;
  color: rgba(238, 245, 255, 0.5);
}
.kyr-switcher-hint b {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-weight: 600;
  color: rgba(238, 245, 255, 0.8);
}
.projects-premium {
  min-width: 780px;
  min-height: 560px;
}
.projects-premium .side {
  gap: 7px;
}
.projects-premium .side button {
  width: 100%;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  text-align: left;
  padding: 9px 10px;
  font: inherit;
  cursor: pointer;
}
.projects-premium .side button:hover,
.projects-premium .side button.on {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
  font-weight: 900;
}
.case-study-premium {
  min-width: 760px;
  min-height: 560px;
}
.win .tile::before,
.win .project-card::before,
.win .concept-card::before,
.win .hero-card::after,
.win .proof-card::after,
.win .settings-panel::after,
.win .card::before,
.win .card::after {
  content: none;
  display: none;
}
.win::before,
.win::after,
.win .tile::before,
.win .tile::after,
.win .project-card::before,
.win .project-card::after,
.win .concept-card::before,
.win .concept-card::after,
.win .hero-card::before,
.win .hero-card::after,
.win .proof-card::before,
.win .proof-card::after,
.win .settings-panel::before,
.win .settings-panel::after,
.win .card::before,
.win .card::after {
  content: none;
  display: none;
  opacity: 0;
  background: none;
  box-shadow: none;
  animation: none;
  transition: none;
}
#experience {
  pointer-events: auto;
}
#experience:not(.is-active):not(.focused) .locked-bubble,
#experience:not(.is-active):not(.focused) .readonly-caret {
  display: none;
  pointer-events: none;
}
.win.is-maximized .bar {
  cursor: zoom-out;
}
.about-os-polished {
  min-width: 620px;
  min-height: 500px;
}
.about-body-polished {
  height: calc(100% - 40px);
  overflow: hidden;
  padding: 0;
  background: transparent;
}
.about-scroll {
  height: 100%;
  overflow: auto;
  padding: 18px;
  box-sizing: border-box;
  display: grid;
  gap: 14px;
}
.about-hero-polished {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 16px;
  align-items: center;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background:
    radial-gradient(circle at 12% 10%, rgba(114, 243, 255, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035));
}
.profile-mark {
  width: 68px;
  height: 68px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  background: #0d1524;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #dfe8f2;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.24);
}
.about-hero-polished h2 {
  margin: 5px 0 8px;
  color: var(--text);
  font-size: clamp(26px, 3vw, 40px);
  line-height: 0.98;
  letter-spacing: -0.05em;
}
.about-hero-polished p,
.about-card-grid span,
.about-panel-polished li {
  color: var(--muted);
  line-height: 1.5;
  font-weight: 500;
}
.about-card-grid {
  display: grid;
  /* auto-fit, not a hard 3. `repeat(3, minmax(0, 1fr))` keeps three tracks at
     ANY width, so in a window dragged to 380px the cards fell to 106px each
     and clipped their own copy - and the media query that flattens them is
     keyed to the viewport, which a resized window never changes. ★ */
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 12px;
}
.about-card-grid article,
.about-panel-polished {
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.055);
  padding: 15px;
}
.about-card-grid b {
  display: block;
  color: var(--text);
  margin-bottom: 7px;
}
.about-panel-polished h3 {
  margin: 0 0 12px;
  color: var(--text);
}
.polished-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.polished-skills span {
  border: 1px solid rgba(255, 255, 255, 0.11);
  background: rgba(255, 255, 255, 0.065);
  color: var(--text);
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 900;
}
.about-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.about-two-col ul {
  margin: 0;
  padding-left: 18px;
}
.about-actions-polished {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 4px;
}
.about-actions-polished button {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
  padding: 9px 12px;
  cursor: pointer;
  font-weight: 900;
}
.about-actions-polished button:first-child {
  background: rgba(114, 243, 255, 0.22);
  border-color: rgba(114, 243, 255, 0.34);
}
.win.is-maximized .bar,
.win.snapped-top .bar {
  cursor: default;
}
.mini-player:hover,
.mini-player:focus-within {
  z-index: 48;
}
#miniClose,
.mini-close {
  color: #fff;
  background: rgba(237, 51, 59, 0.22);
  border-color: rgba(237, 51, 59, 0.38);
  font-size: 20px;
  line-height: 1;
  font-weight: 900;
}
#miniClose:hover,
.mini-close:hover {
  background: rgba(237, 51, 59, 0.34);
  box-shadow: 0 0 16px rgba(237, 51, 59, 0.2);
}
.sound-toggle,
.sound-toggle.muted {
  text-decoration: none;
  background-image: none;
  border: 0;
  box-shadow: none;
  filter: none;
}
.sound-toggle::before,
.sound-toggle::after,
.sound-toggle.muted::before,
.sound-toggle.muted::after {
  content: none;
  display: none;
  opacity: 0;
  background: none;
  border: 0;
  box-shadow: none;
}
#miniClose.mini-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  padding: 0;
  font-size: 17px;
  line-height: 1;
  font-weight: 900;
  color: #fff;
  background: rgba(237, 51, 59, 0.26);
  border: 1px solid rgba(237, 51, 59, 0.42);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
}
#miniClose.mini-close:hover {
  background: rgba(237, 51, 59, 0.4);
}
#miniStop {
  display: grid;
}
#miniPlayer #miniRestore,
#miniPlayer .mini-restore {
  display: none;
}
#miniPlayer #miniClose.mini-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 8;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.065);
  color: var(--text);
  font: 900 17px/1 var(--sans);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
#miniPlayer #miniClose.mini-close:hover {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.24);
  transform: translateY(-1px);
}
#miniPlayer.mini-player {
  z-index: 42;
}
#miniPlayer.mini-player:focus-within {
  z-index: 1200;
}
#miniPlayer .mini-controls {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.win .bar {
  min-height: 42px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035)), rgba(7, 12, 22, 0.28);
  backdrop-filter: blur(14px) saturate(1.12);
  -webkit-backdrop-filter: blur(14px) saturate(1.12);
}
.win .bar .title,
.title {
  letter-spacing: -0.015em;
}
.win-controls button,
.win .bar button,
.window-actions button {
  border-radius: 10px;
  transition:
    transform var(--motion-focus),
    background var(--motion-focus),
    box-shadow var(--motion-focus);
}
.win-controls button:hover,
.win .bar button:hover,
.window-actions button:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.1);
}
.card,
.panel,
.settings-card,
.contact-info-card,
.project-card,
.case-panel,
.about-card,
.start-step,
.tile,
.file,
.note-card,
.concept-card {
  border-radius: var(--style-polish-radius-card);
  border-color: var(--style-polish-line);
  background: var(--style-polish-surface);
  box-shadow: var(--elev-desktop);
}
.project-card,
.file,
.tile,
.concept-card {
  transition:
    transform var(--motion-focus),
    border-color var(--motion-focus),
    background var(--motion-focus),
    box-shadow var(--motion-focus),
    filter var(--motion-focus);
}
.project-card:hover,
.file:hover,
.tile:hover,
.concept-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--kyr-accent-2) 36%, rgba(255, 255, 255, 0.16));
  box-shadow: var(--elev-raised);
}
button,
.btn,
.filter-chip,
.project-chip,
.case-tags span,
.stack-row span {
  border-radius: var(--style-polish-radius-control);
}
button,
.btn,
.filter-chip {
  transition:
    transform var(--motion-focus),
    background var(--motion-focus),
    border-color var(--motion-focus),
    box-shadow var(--motion-focus);
}
/* No 1px lift on hover. Nudging a button moves its LABEL, and text shifted by
   a single pixel is re-rasterised at a fractional offset for the length of the
   transition, then snaps back onto the pixel grid when it lands - read as a
   flicker on the words, not as motion on the button. The affordance was never
   the movement anyway: background, border and shadow all change on hover and
   do it without touching the glyphs. Icon-only controls keep their lift, since
   SVG strokes carry no subpixel text antialiasing to shimmer. ★ */
button:hover,
.btn:hover,
.filter-chip:hover {
}
button:focus-visible,
.btn:focus-visible,
.filter-chip:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--kyr-accent-2) 44%, rgba(255, 255, 255, 0.16));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kyr-accent-2) 24%, transparent);
}
.home-hero h1,
.contact-hero-polished h2,
.settings-hero h2 {
  letter-spacing: -0.055em;
  text-wrap: balance;
}
.project-card-body h3,
.case-panel h3,
.contact-info-card h3,
.settings-card h3 {
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.project-card-body p,
.case-panel p,
.contact-info-card p,
.settings-card p,
.home-hero p {
  line-height: 1.62;
}
.command,
#command,
.master-command-box,
.command-panel {
  border-radius: 28px;
  border-color: var(--style-polish-line);
  box-shadow: var(--elev-window);
}
.command button,
.master-command-results button,
.command-results button {
  border-radius: 16px;
}
.command button:hover,
.master-command-results button:hover,
.command-results button:hover {
  background: rgba(255, 255, 255, 0.08);
}
#miniPlayer,
.mini-player {
  border-radius: 24px;
  border-color: rgba(255, 255, 255, 0.13);
  background: rgba(7, 12, 22, 0.62);
  box-shadow: var(--elev-raised);
  backdrop-filter: blur(18px) saturate(1.16);
  -webkit-backdrop-filter: blur(18px) saturate(1.16);
}
#miniPlayer button,
.mini-player button {
  border-radius: 14px;
}
input,
textarea,
select {
  border-radius: 14px;
  border-color: rgba(255, 255, 255, 0.13);
  background: rgba(3, 7, 14, 0.44);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
}
#dock,
.dock,
.topbar,
.win {
  pointer-events: auto;
}
.resume-polished-body {
  padding: 22px;
  height: calc(100% - 44px);
  overflow: auto;
  color: var(--text, #eef7ff);
}
.resume-polished-card,
.resume-polished-grid section {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 22px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.resume-polished-card h2 {
  margin: 8px 0;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 0.98;
  letter-spacing: -0.06em;
}
.resume-polished-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.resume-polished-actions button {
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  cursor: pointer;
  font-weight: 850;
}
.resume-polished-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.resume-polished-grid p,
.resume-polished-card p {
  color: var(--muted, rgba(238, 247, 255, 0.68));
  line-height: 1.55;
}
.folder,
.doc,
.mail,
.trash,
.resume-doc,
.music-folder {
  width: clamp(40px, 6.8vh, 58px);
  height: clamp(40px, 6.8vh, 58px);
}
body,
button,
input,
textarea,
select {
  font-family: var(--display);
}
body.session-restore-active .wallpaper,
body.session-restore-active .topbar,
body.session-restore-active .dock,
body.session-restore-active .win,
body.session-restore-active #miniPlayer {
  opacity: 0;
  filter: blur(6px) brightness(0.68) saturate(0.9);
  transition:
    opacity 0.42s ease,
    filter 0.52s ease;
}
body.session-restore-ready .wallpaper,
body.session-restore-ready .topbar,
body.session-restore-ready .dock,
body.session-restore-ready .win,
body.session-restore-ready #miniPlayer {
  opacity: 1;
  filter: none;
}
body.calm-effects {
  --bg: #0e1117;
  --panel: rgba(22, 28, 37, 0.92);
  --panel-solid: #171d27;
  --glass: rgba(24, 30, 39, 0.86);
  --line: rgba(214, 224, 238, 0.13);
  --line-strong: rgba(153, 193, 241, 0.3);
  --text: #eef2f7;
  --muted: #a9b4c3;
  --pink: #62a0ea;
  --pink2: #3584e4;
  --purple: #7d8ca3;
  --blue: #62a0ea;
  --cyan: #99c1f1;
  --green: #8ff0a4;
  --yellow: #f6d58c;
  --orange: #f6b26b;
  --cream: #f5f7fa;
  background: #0e1117;
  --accent-scroll-thumb: var(--scroll-thumb);
  --accent-scroll-track: var(--scroll-track);
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}
body.calm-effects::before {
  opacity: 0.08;
  mix-blend-mode: normal;
}
body.calm-effects .wallpaper::after {
  background: linear-gradient(180deg, rgba(14, 17, 23, 0.1), rgba(14, 17, 23, 0.56) 70%, rgba(14, 17, 23, 0.78));
}
body.calm-effects .win {
  background: linear-gradient(180deg, rgba(34, 41, 52, 0.96), rgba(20, 25, 34, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 16px;
  box-shadow: var(--elev-raised);
  backdrop-filter: blur(8px) saturate(1.04);
  -webkit-backdrop-filter: blur(8px) saturate(1.04);
}
body.calm-effects .win::before,
body.calm-effects .tile::before,
body.calm-effects .project-card::before,
body.calm-effects .project-card::after,
body.calm-effects .hero-card::before,
body.calm-effects .hero-card::after,
body.calm-effects .proof-card::after,
body.calm-effects .settings-panel::after {
  content: none;
  display: none;
}
body.calm-effects .bar {
  height: 42px;
  background: linear-gradient(180deg, #293241, #202836);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: color-mix(in srgb, var(--linux-accent) 24%, rgba(255, 255, 255, 0.08));
}
body.calm-effects h1,
body.calm-effects h2,
body.calm-effects .hero-card h1,
body.calm-effects .home-section-title h1 {
  letter-spacing: 0;
  background: none;
  color: #f5f7fa;
}
body.calm-effects .hero-card h1 {
  max-width: 14ch;
  line-height: 1.02;
}
body.calm-effects .hero-actions button,
body.calm-effects .case-actions button,
body.calm-effects .filter-chip,
body.calm-effects .ghost-btn,
body.calm-effects .contact form button {
  border: 1px solid rgba(153, 193, 241, 0.24);
  border-radius: 10px;
  background: rgba(53, 132, 228, 0.14);
  color: #eef5ff;
  box-shadow: none;
}
body.calm-effects .hero-actions button:hover,
body.calm-effects .case-actions button:hover,
body.calm-effects .filter-chip:hover,
body.calm-effects .filter-chip.active {
  background: rgba(53, 132, 228, 0.24);
  border-color: rgba(153, 193, 241, 0.44);
}
body.calm-effects .tile:hover,
body.calm-effects .card:hover,
body.calm-effects .project-card:hover,
body.calm-effects .concept-card:hover {
  transform: translateY(-2px);
  filter: none;
  box-shadow: var(--elev-raised);
}
body.calm-effects #miniPlayer {
  background: rgba(24, 30, 39, 0.94);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: var(--elev-raised);
  backdrop-filter: blur(10px) saturate(1.02);
  -webkit-backdrop-filter: blur(10px) saturate(1.02);
}
body.calm-effects .toast {
  background: rgba(24, 30, 39, 0.96);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: var(--elev-raised);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
body.calm-effects .locked-bubble {
  color: #eef2f7;
}
#fullBootScreen .linux-boot-terminal,
.linux-boot-terminal {
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#fullBootScreen .linux-boot-terminal::-webkit-scrollbar,
.linux-boot-terminal::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
.win.wm-managed > .resize-grip,
.win > .resize-grip {
  z-index: 120;
  width: 24px;
  height: 24px;
  right: 0;
  bottom: 0;
  border-bottom-right-radius: inherit;
  background: linear-gradient(
    135deg,
    transparent 0 44%,
    rgba(133, 222, 255, 0.18) 45% 55%,
    transparent 56% 64%,
    rgba(133, 222, 255, 0.34) 65% 72%,
    transparent 73%
  );
  box-shadow: inset -1px -1px 0 rgba(255, 255, 255, 0.12);
}
.win > .layout,
.win > .playerbody,
.win > .contact-shell,
.win > .settings-body,
.win > .shortcuts-body,
.win > .resume-body,
.win > .about-body,
.win > .terminal-body,
.win > .note-body,
.win > .concept-grid,
.win > .scrap-grid,
.win > .project-workbench {
  max-height: calc(100% - 40px - var(--resize-safe));
  height: calc(100% - 40px - var(--resize-safe));
  margin-bottom: var(--resize-safe);
  overflow: hidden;
}
.win > .layout .main,
.win > .layout .side,
.win .project-main,
.win .project-workbench,
.win .notes,
.win .terminal-body,
.win .shortcuts-body,
.win .settings-body,
.win .resume-body,
.win .contact-shell {
  scrollbar-gutter: stable both-edges;
  padding-bottom: calc(18px + var(--resize-safe));
}
.win *::-webkit-scrollbar-corner {
  background: transparent;
}
.win *::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.win *::-webkit-scrollbar-track {
  margin-bottom: var(--resize-safe);
  background: var(--scroll-track);
  border-radius: 999px;
}
.win *::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--scroll-thumb);
  border: 2px solid transparent;
  background-clip: padding-box;
}
.win *::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-hover);
  background-clip: padding-box;
}
#home [data-open="experience"] {
  display: none;
}
#home [data-open="resume"] b small {
  font-size: 0;
}
#home [data-open="resume"] b small::after {
  content: "plain text";
  font-size: 11px;
}
#resume .resume-body {
  overflow: auto;
}
#resume .resume-polished-card::before {
  content: "TXT";
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 64px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, #f8fbff, #dce8f6);
  color: #243146;
  font: 900 13px/1 var(--font-body);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 #fff;
}
/* FW-1.2: the window title is brand, so it takes the display face. This rule is
   the late, most-specific one and the single owner of the title's type - it
   applies the --type-title role (Ubuntu 15/500, +0.2 tracking) everywhere,
   including the terminal window. */
.bar .title,
.win .bar .title {
  font: var(--type-title);
  letter-spacing: var(--type-title-ls);
}
.songtitle {
  font-family: var(--sans);
}
/* FW-1.3: the dock-shelf-v7 replica (gradient shelf, shine hairline, ground
   shadow, per-app accent tints, bevelled buttons, hero-app tile, active
   underline) is retired. The FW-1.1 flat strip below is the dock's one rest
   state. Hover magnification is FW-1.6 "Meridian Dock" - see the transit
   lens rules further down; the dock-hover-v8 class is now only a stable
   clone marker (bootstrapDock in app.js), not a style hook. */
#dock.dock-shelf-v7 .dock-mobile-label {
  display: none;
}

body:not(.theme-pink):not(.theme-green):not(.theme-amber) {
  --linux-accent: #1c9bd6;
  --linux-accent-2: #62d0f7;
  --dock-accent-default: #62d0f7;
}
#settings.win {
  min-height: 360px;
}
#settings.win > .settings-body {
  height: calc(100% - 44px);
  max-height: calc(100% - 44px);
  margin-bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
  align-content: start;
  grid-auto-rows: max-content;
  scrollbar-gutter: stable;
  padding-bottom: 24px;
}
#settings.win .settings-panel {
  min-height: max-content;
}
#settings.win .theme-swatches,
#settings.win .hero-actions {
  flex-wrap: wrap;
}
body.calm-effects *,
body.calm-effects *::before,
body.calm-effects *::after {
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}
/* calm-effects is the DEFAULT body class, so this pair is what most visitors
   actually see - it was the brightest of the lot. Same neutral as everywhere. */
body.calm-effects *::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border: 2px solid transparent;
  background-clip: padding-box;
}
body.calm-effects *::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-hover);
  background-clip: padding-box;
}
body.calm-effects .filter-chip.active,
body.calm-effects .hero-actions button:hover,
body.calm-effects .case-actions button:hover,
body.calm-effects .ghost-btn:hover,
body.calm-effects .contact form button {
  border-color: color-mix(in srgb, var(--linux-accent) 46%, rgba(255, 255, 255, 0.16));
}
body.calm-effects #settings.win {
  width: min(520px, calc(100vw - 36px));
  height: min(560px, calc(100vh - 132px));
}
#home.win {
  container: developer-files / inline-size;
  min-width: 320px;
  min-height: 300px;
}
#home .side,
#home .main,
#home .tile,
#home .home-hero,
#home .hero-card {
  min-width: 0;
}
#home .side div,
#home .side-invite,
#home .tile b,
#home .tile small,
#home .main p {
  overflow-wrap: anywhere;
}
#home .side div:not(.side-invite) {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  column-gap: 7px;
  font-family: var(--font-body);
}
#home .side .side-unavailable {
  color: color-mix(in srgb, var(--muted-2) 84%, transparent);
  cursor: not-allowed;
  opacity: 0.62;
}
#home .side .side-unavailable:hover {
  color: color-mix(in srgb, var(--muted-2) 84%, transparent);
  background: rgba(255, 255, 255, 0.025);
}
#home .side .side-unavailable:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--cyan) 58%, transparent);
  outline-offset: 2px;
}
#home .side .side-unavailable .side-glyph {
  color: var(--muted-2);
}
#home .side .side-glyph {
  display: inline-grid;
  place-items: center;
  width: 18px;
  min-width: 18px;
  color: color-mix(in srgb, var(--cyan) 68%, var(--cream));
}
#home .side .side-label {
  min-width: 0;
  /* A nav label is a destination name, not prose - it stays on one line. If the
     rail is ever too narrow for it, truncate: a clipped name still reads as one
     item, while a wrapped one reads as two and drags its glyph out of line. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#home .side {
  overflow: visible;
  padding-bottom: clamp(48px, 8cqw, 76px);
}
#home .main h1,
#home .home-section-title h1,
#home .hero-card h1 {
  font-size: clamp(28px, 7.4cqw, 63px);
  max-width: 100%;
}
#home .main > p,
#home .hero-card p {
  line-height: 1.48;
}
#home .tile b {
  display: block;
  line-height: 1.18;
}

/* ══════════════════════════════════════════════════════════════════════
   [ * ]  KYROS TERMINAL (WS-5) · rides the design tokens already set above
   ────────────────────────────────────────────────────────────────────── */
.win.terminal {
  --term-bg: rgba(7, 11, 22, 0.92);
  --term-fg: #d7e7ff;
  --term-mono: var(--font-mono);
  background: var(--term-bg);
  color: var(--term-fg);
  font-family: var(--term-mono);
  min-width: 520px;
  min-height: 320px;
  width: min(720px, 80vw);
  height: min(440px, 70vh);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.win.terminal:not(.hidden) {
  display: flex;
}
/* FW-1.2: the terminal's title bar is still a window title - it stays on the
   Ubuntu title role; only the terminal BODY speaks mono. */
.win.terminal .bar .title {
  opacity: 0.85;
}
.terminal-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.6;
  scrollbar-width: thin;
  scrollbar-color: rgba(114, 243, 255, 0.35) transparent;
}
.terminal-body::-webkit-scrollbar {
  width: 8px;
}
.terminal-body::-webkit-scrollbar-thumb {
  background: rgba(114, 243, 255, 0.25);
  border-radius: 4px;
}
.terminal-output {
  margin-bottom: 8px;
}
.t-line {
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--term-fg);
}
.t-line.t-err {
  color: #ff7b9c;
}
.t-line.t-muted,
.t-line .muted {
  color: rgba(215, 231, 255, 0.6);
}
.t-line.t-echo {
  color: rgba(215, 231, 255, 0.85);
}
.t-cmd-prompt {
  color: var(--project-accent, #72f3ff);
}
.terminal-inputline {
  display: flex;
  align-items: baseline;
  gap: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 8px;
  margin-top: 4px;
}
.terminal-prompt {
  color: var(--project-accent, #72f3ff);
  white-space: nowrap;
  user-select: none;
}
.terminal-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--term-fg);
  font: inherit;
  outline: none;
  caret-color: var(--project-accent, #72f3ff);
  padding: 0;
}
.terminal-input::placeholder {
  color: rgba(215, 231, 255, 0.3);
}
.t-banner {
  border: 1px dashed rgba(114, 243, 255, 0.25);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  color: rgba(215, 231, 255, 0.78);
  font-size: 12px;
  line-height: 1.6;
}
.t-banner strong {
  color: var(--project-accent, #72f3ff);
}
.t-banner code {
  background: rgba(114, 243, 255, 0.12);
  color: var(--project-accent, #72f3ff);
  padding: 1px 6px;
  border-radius: 4px;
  font: inherit;
}
.t-line.t-art {
  margin: 4px 0;
}
.t-neo {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  align-items: center;
}
.t-neo-art {
  color: var(--project-accent, #72f3ff);
  font: 9px/1.1 var(--term-mono);
  margin: 0;
  text-shadow: 0 0 10px rgba(114, 243, 255, 0.35);
  white-space: pre;
}
.t-neo-info {
  font-size: 12px;
  line-height: 1.7;
}
.t-neo-k {
  color: var(--project-accent, #72f3ff);
  font-weight: 600;
  margin-right: 6px;
}
.t-sl {
  color: rgba(215, 231, 255, 0.7);
  font: 7px/1 var(--term-mono);
  white-space: pre;
}
.t-matrix {
  color: #8ff0a4;
  font: 10px/1 var(--term-mono);
  letter-spacing: 0.05em;
  text-shadow: 0 0 6px rgba(143, 240, 164, 0.4);
}
@media (max-width: 760px) {
  .win.terminal {
    min-width: 0;
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    border: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .t-neo-art {
    text-shadow: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   [ * ]  KYRPREFERENCES (WS-10) · accessibility & effects
   ────────────────────────────────────────────────────────────────────── */
:root {
  --kyr-text-scale: 1;
}
html {
  font-size: calc(16px * var(--kyr-text-scale));
}
.prefs-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.prefs-section {
  padding: 0;
  border: none;
}
.prefs-row {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.prefs-row-copy {
  flex: 1 1 220px;
  min-width: 0;
}
.prefs-row-label {
  margin: 0;
  font-weight: 600;
}
.prefs-row-help {
  margin: 4px 0 0;
  font-size: 12px;
}
.prefs-segmented {
  display: inline-flex;
  flex-wrap: wrap;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
}
.prefs-segmented button {
  border: none;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
  color: inherit;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background var(--motion-focus),
    color var(--motion-focus);
  min-height: 32px;
}
.prefs-segmented button:last-child {
  border-right: none;
}
.prefs-segmented button:hover {
  background: rgba(114, 243, 255, 0.08);
}
.prefs-segmented button.is-active {
  background: rgba(114, 243, 255, 0.18);
  color: var(--project-accent, #72f3ff);
}
.prefs-segmented button:focus-visible {
  outline: 2px solid var(--project-accent, #72f3ff);
  outline-offset: -2px;
}
.prefs-reset {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
}
.prefs-reset-btn {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: transparent;
  color: inherit;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
}
.prefs-reset-btn:hover {
  background: rgba(255, 91, 157, 0.1);
  border-color: rgba(255, 91, 157, 0.4);
}

/* ──[ · ]── preference reactions ────────────────────────────────────────── */
html[data-reduced-motion="on"] *,
html[data-reduced-motion="on"] *::before,
html[data-reduced-motion="on"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}
html[data-reduced-effects="on"] .win,
html[data-reduced-effects="on"] .topbar,
html[data-reduced-effects="on"] .dock,
html[data-reduced-effects="on"] .toast,
html[data-reduced-effects="on"] #fullBootScreen .linux-boot-frame {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background-color: rgba(7, 11, 22, 0.96) !important;
}
html[data-reduced-effects="on"] .win {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
}
html[data-increased-contrast="on"] {
  --ink: #ffffff;
  --ink-muted: rgba(231, 241, 255, 0.92);
}
html[data-increased-contrast="on"] .win {
  border-color: rgba(255, 255, 255, 0.42);
}
html[data-increased-contrast="on"] .muted {
  color: rgba(231, 241, 255, 0.92);
}
html[data-increased-contrast="on"] .bar .title,
html[data-increased-contrast="on"] .side-label {
  color: #ffffff;
}

/* Respect the OS signal directly when the visitor hasn't pinned a choice.
   The data-* attributes above already resolve auto→on/off, but having these
   in CSS too keeps the site honest even if JS fails. */
@media (prefers-reduced-motion: reduce) {
  html:not([data-reduced-motion="off"]) *,
  html:not([data-reduced-motion="off"]) *::before,
  html:not([data-reduced-motion="off"]) *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   [ * ]  ACCESSIBLE TOAST STACK (WS-3)
   ────────────────────────────────────────────────────────────────────── */
.toast-stack {
  position: fixed;
  z-index: 2147483005;
  bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  right: calc(16px + env(safe-area-inset-right, 0px));
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  max-width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}
.toast-item {
  pointer-events: auto;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(13, 22, 38, 0.94);
  color: #eef7ff;
  border: 1px solid rgba(255, 255, 255, 0.16);
  /* FW-5.4: toasts join the system voice - body face, and a meridian edge
     whose colour carries the meaning (sky = info/success, red = error). */
  border-left: 2px solid rgba(111, 227, 242, 0.55);
  box-shadow: var(--elev-raised);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font: 500 13px/1.45 var(--font-body, var(--sans));
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  transition:
    opacity var(--motion-enter),
    transform var(--motion-enter);
}
.toast-item[data-toast-state="visible"] {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.toast-item[data-toast-state="leaving"] {
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
}
.toast-copy {
  min-width: 0;
  word-break: break-word;
}
.toast-action {
  border: 1px solid rgba(114, 243, 255, 0.5);
  background: rgba(114, 243, 255, 0.12);
  color: var(--project-accent, #72f3ff);
  font: 700 12px/1 var(--sans);
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.toast-action:hover {
  background: rgba(114, 243, 255, 0.22);
}
.toast-action:focus-visible {
  outline: 2px solid var(--project-accent, #72f3ff);
  outline-offset: 2px;
}
.toast-dismiss {
  border: none;
  background: transparent;
  color: rgba(238, 247, 255, 0.6);
  font:
    600 16px/1 system-ui,
    sans-serif;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  align-self: start;
}
.toast-dismiss:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #eef7ff;
}
.toast-dismiss:focus-visible {
  outline: 2px solid var(--project-accent, #72f3ff);
  outline-offset: 2px;
}
.toast-success {
  border-color: rgba(143, 240, 164, 0.4);
}
.toast-success .toast-action {
  border-color: rgba(143, 240, 164, 0.5);
  color: #8ff0a4;
  background: rgba(143, 240, 164, 0.12);
}
/* FW-1.3 says destructive = red; the pink here predated that ruling. */
.toast-error {
  border-color: rgba(240, 86, 95, 0.42);
  border-left-color: rgba(240, 86, 95, 0.7);
}
.toast-error .toast-action {
  border-color: rgba(240, 86, 95, 0.5);
  color: #f0565f;
  background: rgba(240, 86, 95, 0.12);
}
@media (max-width: 760px) {
  .toast-stack {
    left: 12px;
    right: 12px;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    max-width: none;
  }
}
html[data-reduced-motion="on"] .toast-item,
html[data-reduced-effects="on"] .toast-item {
  transition: opacity 0.12s linear;
  transform: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(13, 22, 38, 0.98);
}
html[data-reduced-motion="on"] .toast-item[data-toast-state="visible"] {
  transform: none;
}

/* ══════════════════════════════════════════════════════════════════════
   [ * ]  DESKTOP CONTEXT MENU (WS-13)
   ────────────────────────────────────────────────────────────────────── */
.kyr-context-menu {
  position: fixed;
  z-index: 2147483006;
  min-width: 240px;
  max-width: 320px;
  max-height: min(420px, calc(100vh - 32px));
  overflow-y: auto;
  padding: 6px;
  background: rgba(13, 22, 38, 0.96);
  color: #eef7ff;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  box-shadow: var(--elev-raised);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font: 500 13px/1.4 var(--sans);
  outline: none;
}
.kyr-context-menu.hidden {
  display: none;
}
.kyr-context-group {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10px;
  font-weight: 700;
  color: rgba(215, 231, 255, 0.5);
  padding: 8px 12px 4px;
}
.kyr-context-group:first-child {
  padding-top: 4px;
}
.kyr-context-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: none;
  background: transparent;
  color: inherit;
  text-align: left;
  padding: 9px 10px;
  min-height: 36px;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  transition: background var(--motion-focus);
}
.kyr-context-item.is-active,
.kyr-context-item:hover,
.kyr-context-item:focus-visible {
  background: rgba(114, 243, 255, 0.12);
  outline: none;
}
.kyr-context-item:focus-visible {
  outline: 2px solid var(--project-accent, #72f3ff);
  outline-offset: -2px;
}
.kyr-context-icon {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  font-size: 13px;
  font-weight: 700;
  color: var(--project-accent, #72f3ff);
  flex-shrink: 0;
}
.kyr-context-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.kyr-context-title {
  font-weight: 600;
}
.kyr-context-sub {
  font-size: 11px;
  color: rgba(215, 231, 255, 0.6);
}
.kyr-context-empty {
  padding: 14px 12px;
  color: rgba(215, 231, 255, 0.6);
  font-size: 12px;
}
@media (max-width: 760px) {
  .kyr-context-menu {
    min-width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    left: 12px !important;
  }
}
html[data-reduced-effects="on"] .kyr-context-menu {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(13, 22, 38, 0.99);
}
html[data-reduced-motion="on"] .kyr-context-item {
  transition: none;
}

/* ══════════════════════════════════════════════════════════════════════
   [ * ]  MOBILE APP-STACK (WS-11) · header (Back + switcher), safe areas, UI
   ──────────────────────────────────────────────────────────────────────
   Header controls are injected by modules/mobile-shell.js ONLY into
   app-window bars (data-mobile-nav) → the command palette is never touched.
   ────────────────────────────────────────────────────────────────────── */

/* Injected controls are desktop-hidden; only the mobile shell reveals them. */
.mob-back,
.mob-switch {
  display: none;
}

@media (max-width: 900px), (pointer: coarse) {
  /* Respect notches / home indicators. */
  body.mobile-shell .topbar {
    padding-top: env(safe-area-inset-top) !important;
    height: calc(42px + env(safe-area-inset-top)) !important;
  }
  body.mobile-shell .win {
    top: calc(50px + env(safe-area-inset-top)) !important;
    bottom: calc(82px + env(safe-area-inset-bottom)) !important;
    left: 8px !important;
    right: 8px !important;
    border-radius: 16px !important;
  }
  /* Background apps stay open (state preserved) but only the active one renders. */
  body.mobile-shell .win.mobile-stashed {
    display: none !important;
  }
  body.mobile-shell .dock,
  body.mobile-shell #dock {
    bottom: calc(8px + env(safe-area-inset-bottom)) !important;
  }

  /* Window titlebar becomes a native-feeling app header. */
  body.mobile-shell .bar[data-mobile-nav="true"] {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 6px !important;
  }
  body.mobile-shell .bar[data-mobile-nav="true"] > span:not(.title) {
    display: none !important;
  }
  /* The mobile header has its own Back + switcher; desktop window controls do
     not belong in it. Hide the whole cluster - listing individual controls here
     meant the new maximise button leaked into the mobile header (FW-1.2). */
  body.mobile-shell .bar[data-mobile-nav="true"] .win-controls {
    display: none !important;
  }
  body.mobile-shell .bar[data-mobile-nav="true"] .title {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    text-align: center !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 15px !important;
    font-weight: 650 !important;
  }

  body.mobile-shell .mob-back {
    display: inline-flex !important;
    align-items: center;
    gap: 1px;
    flex: 0 0 auto;
    min-height: 40px;
    padding: 4px 10px 4px 6px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--cyan, #72f3ff);
    font: inherit;
    font-size: 15px;
    cursor: pointer;
  }
  body.mobile-shell .mob-back span {
    font-size: 22px;
    line-height: 1;
    margin-right: 1px;
  }
  body.mobile-shell .mob-back:active {
    background: rgba(255, 255, 255, 0.1);
  }
  /* Base app has nowhere to go back to - keep layout, remove the affordance. */
  body.mobile-shell #home .bar[data-mobile-nav="true"] .mob-back {
    visibility: hidden;
    pointer-events: none;
  }

  body.mobile-shell .mob-switch {
    display: inline-grid !important;
    place-items: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: var(--text);
    font-size: 19px;
    cursor: pointer;
  }
  body.mobile-shell .mob-switch:active {
    background: rgba(255, 255, 255, 0.1);
  }

  /* ──[ · ]── app switcher overlay ─────────────────────────────────────── */
  .mobile-switcher {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: flex;
    align-items: flex-end;
    /* setting display:flex would otherwise defeat the [hidden] attribute */
  }
  .mobile-switcher[hidden] {
    display: none !important;
  }
  .mobile-switcher {
    background: rgba(4, 8, 16, 0.55);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity var(--motion-enter);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mobile-switcher.open {
    opacity: 1;
  }
  .mobile-switcher .ms-sheet {
    width: 100%;
    max-height: 76vh;
    margin: 0 8px 8px;
    background: var(--panel, #10151f);
    border: 1px solid var(--line-strong, rgba(255, 255, 255, 0.12));
    border-radius: 20px;
    padding: 14px 14px 18px;
    transform: translateY(14px);
    transition: transform var(--motion-enter);
    overflow: auto;
  }
  .mobile-switcher.open .ms-sheet {
    transform: translateY(0);
  }
  .mobile-switcher .ms-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
  }
  .mobile-switcher .ms-head h2 {
    margin: 0;
    font-size: 15px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.8;
  }
  .mobile-switcher .ms-close {
    border: 0;
    background: transparent;
    color: var(--cyan, #72f3ff);
    font: inherit;
    font-size: 15px;
    padding: 6px 8px;
    cursor: pointer;
  }
  .mobile-switcher .ms-grid {
    display: grid;
    gap: 10px;
  }
  .mobile-switcher .ms-card {
    position: relative;
    display: flex;
    align-items: stretch;
    border: 1px solid var(--line, rgba(255, 255, 255, 0.08));
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.03);
  }
  .mobile-switcher .ms-card.is-active {
    border-color: color-mix(in srgb, var(--cyan, #72f3ff) 50%, transparent);
    background: color-mix(in srgb, var(--cyan, #72f3ff) 10%, rgba(255, 255, 255, 0.03));
  }
  .mobile-switcher .ms-open {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: flex-start;
    text-align: left;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    padding: 14px 14px;
    min-height: 56px;
    cursor: pointer;
  }
  .mobile-switcher .ms-title {
    font-size: 15px;
    font-weight: 650;
  }
  .mobile-switcher .ms-meta {
    font-size: 12px;
    opacity: 0.6;
  }
  .mobile-switcher .ms-card-close {
    flex: 0 0 auto;
    width: 48px;
    border: 0;
    border-left: 1px solid var(--line, rgba(255, 255, 255, 0.08));
    background: transparent;
    color: var(--text);
    font-size: 20px;
    cursor: pointer;
  }
  .mobile-switcher .ms-card-close:active {
    background: rgba(255, 255, 255, 0.08);
  }
  .mobile-switcher .ms-empty {
    margin: 8px 0;
    opacity: 0.65;
    font-size: 13px;
  }
}

/* Reduced motion: no slide/fade on the switcher. */
html[data-reduced-motion="on"] .mobile-switcher,
html[data-reduced-motion="on"] .mobile-switcher .ms-sheet {
  transition: none !important;
}

/* ══════════════════════════════════════════════════════════════════════
   [ * ]  KYR MARKDOWN EDITOR (FW-1.7) · read-only Markdown SOURCE view
   ──────────────────────────────────────────────────────────────────────
   About.md keeps its syntax characters on screen, receded to muted
   punctuation - scans clean, still reads as a real .md file.
   Layout: markdown-view.js emits one .md-row per source line, and each row
   owns BOTH its gutter cell AND its line cell → a heading can claim extra
   height, or a fence take a background, without the gutter drifting out of
   step (the two cells travel together by construction). Do NOT split them
   back into independent columns. Scoped to #experience on purpose - a
   document surface, not the shell; all below is tokenised (--kyr-ed-*) up top.
   ────────────────────────────────────────────────────────────────────── */
#experience .editor {
  flex: 1 1 auto;
  min-height: 0;
  display: block;
  overflow: auto;
  padding: var(--kyr-ed-pad-y) 0;
  background: var(--kyr-ed-bg);
  border-top: 1px solid var(--kyr-ed-border);
  font-family: var(--kyr-ed-mono);
  font-size: var(--kyr-ed-size);
  line-height: var(--kyr-ed-leading);
  font-variant-ligatures: none;
  color: var(--kyr-ed-text);
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}
#experience .editor::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}
#experience .editor::-webkit-scrollbar-track {
  background: transparent;
}
#experience .editor::-webkit-scrollbar-thumb {
  background: rgba(125, 211, 252, 0.2);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
#experience .editor::-webkit-scrollbar-thumb:hover {
  background: rgba(125, 211, 252, 0.32);
  background-clip: content-box;
}
#experience .editor ::selection {
  background: var(--kyr-ed-selection);
}

/* The raw file. Shown only until markdown-view.js paints - so a no-JS visitor
   still gets the complete, readable document rather than an empty pane. */
#experience .md-source {
  margin: 0;
  padding: 0 var(--kyr-ed-pad-x);
  font: inherit;
  color: var(--kyr-ed-text);
  white-space: pre;
}
#experience .editor.is-rendered .md-source {
  display: none;
}
#experience .md-doc:empty {
  display: none;
}

/* ──[ · ]── rows · gutter + line, locked together ──────────────────────────── */
#experience .md-row {
  display: grid;
  grid-template-columns: var(--kyr-ed-gutter-w) 1fr;
  align-items: baseline;
  column-gap: 18px;
  padding-right: var(--kyr-ed-pad-x);
  white-space: pre;
}
#experience .md-gutter {
  text-align: right;
  /* Smaller and quieter than the document - it is chrome, not content. */
  font-size: 0.78em;
  color: var(--kyr-ed-punct);
  opacity: 0.65;
  user-select: none;
  -webkit-user-select: none;
}
#experience .md-line {
  min-width: 0;
}
#experience .md-row.is-active {
  background: var(--kyr-ed-active-line);
}
#experience .md-row.is-active .md-gutter {
  color: var(--kyr-ed-heading);
  opacity: 1;
}

/* ──[ · ]── markdown tokens ────────────────────────────────────────────────── */
/* Structural punctuation: visible, but quieter than the content it wraps. */
#experience .md-punct {
  color: var(--kyr-ed-punct);
}
#experience .md-h {
  color: var(--kyr-ed-heading);
  font-weight: 700;
}
/* Headings step down toward body size; rows give them room to breathe. */
#experience .md-h1 {
  font-size: 1.45em;
}
#experience .md-h2 {
  font-size: 1.22em;
}
#experience .md-h3 {
  font-size: 1.08em;
}
#experience .md-h4,
#experience .md-h5,
#experience .md-h6 {
  font-size: 1em;
}
#experience .md-row.is-heading {
  padding-top: 0.5em;
  padding-bottom: 0.15em;
}
#experience .md-row.is-h1 {
  padding-top: 0;
}
#experience .md-strong {
  color: var(--kyr-ed-strong);
  font-weight: 700;
}
#experience .md-em {
  color: var(--kyr-ed-em);
  font-style: italic;
}
#experience .md-list-marker {
  color: var(--kyr-ed-marker);
  font-weight: 700;
}
#experience .md-li {
  color: var(--kyr-ed-text);
}
#experience .md-link-text {
  color: var(--kyr-ed-link);
}
#experience .md-link-text:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
#experience .md-link-url {
  color: var(--kyr-ed-text-2);
}
/* Inline code sits on a subtle pill rather than shouting in colour alone. */
#experience .md-code-span {
  color: var(--kyr-ed-code);
  background: rgba(167, 243, 208, 0.08);
  border-radius: 4px;
  padding: 0.1em 0.34em;
}
#experience .md-quote {
  color: var(--kyr-ed-text-2);
}
#experience .md-row.is-quote .md-line {
  border-left: 2px solid var(--kyr-ed-quote);
  padding-left: 10px;
  margin-left: 2px;
}
#experience .md-hr {
  color: var(--kyr-ed-border);
}
#experience .md-row.is-hr .md-line {
  position: relative;
}

/* ──[ · ]── fenced code blocks · one elevated slab across contiguous rows ──── */
#experience .md-row.is-fence .md-line {
  background: var(--kyr-ed-elevated);
  border-left: 1px solid var(--kyr-ed-border);
  border-right: 1px solid var(--kyr-ed-border);
  padding-inline: 14px;
}
#experience .md-row.fence-start .md-line {
  border-top: 1px solid var(--kyr-ed-border);
  border-radius: 7px 7px 0 0;
  padding-top: 8px;
}
#experience .md-row.fence-end .md-line {
  border-bottom: 1px solid var(--kyr-ed-border);
  border-radius: 0 0 7px 7px;
  padding-bottom: 8px;
}
#experience .md-code-block {
  color: var(--kyr-ed-code-block);
}
#experience .md-fence-lang {
  color: var(--kyr-ed-em);
}

/* ──[ · ]── chrome · title bar, tab strip, status bar ──────────────────────── */
#experience .toolbar {
  background: var(--kyr-ed-chrome);
  border-bottom: 1px solid var(--kyr-ed-border);
  color: var(--kyr-ed-text-2);
}
#experience .toolbar > span:first-child {
  background: var(--kyr-ed-elevated);
  color: var(--kyr-ed-text);
  border-radius: 6px 6px 0 0;
}
#experience > .bar {
  background: var(--kyr-ed-chrome);
}
#experience .readonly-caret {
  background: var(--kyr-ed-cursor);
}

/* ──[ · ]── responsive · the editor stays usable at small sizes ────────────── */
@media (max-width: 760px) {
  #experience .editor {
    --kyr-ed-pad-x: 14px;
    --kyr-ed-gutter-w: 26px;
    --kyr-ed-size: 13px;
  }
  #experience .md-row {
    column-gap: 10px;
  }
}

/* Landing shell: the greeting sits directly on the wallpaper. */

:root {
  /* The accent follows the live theme; paper and hairlines stay fixed. */
  --fw-paper: #f4efe4;
  /* This opacity keeps the status readout above 4.5:1 on the topbar. */
  --fw-paper-78: rgba(226, 220, 206, 0.78);
  --fw-paper-72: rgba(236, 230, 216, 0.74);
  --fw-paper-55: rgba(232, 226, 212, 0.55);
  --fw-paper-38: rgba(226, 220, 206, 0.38);
  --fw-line: rgba(176, 200, 228, 0.17);
  --fw-line-soft: rgba(176, 200, 228, 0.1);
  --fw-accent: var(--kyr-accent-2, #6fe3f2);
}

/* Screen-reader-only utility (boot announcement, terminal hint). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ──[ · ]── wallpaper reaches the very top · the topbar is barely-there glass ─ */
.wallpaper {
  inset: 0;
}

/* ──[ · ]── topbar · wordmark left, date · time right, nothing else ────────── */
.topbar,
body.calm-effects .topbar,
body.mobile-shell .topbar {
  height: 42px;
  padding: 0 18px;
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.brand {
  gap: 9px;
  color: var(--fw-paper);
}
.brand .mark {
  display: flex;
  align-items: center;
  color: var(--fw-paper);
  font-size: 0;
  text-shadow: none;
}
.brand .mark svg {
  display: block;
}
.brand b {
  color: var(--fw-paper);
  font: var(--type-wordmark);
  letter-spacing: var(--type-wordmark-ls);
}
.topbar .status {
  gap: 0;
  color: var(--fw-paper-78);
  font: var(--type-clock);
  letter-spacing: var(--type-clock-ls);
}
.topbar .status #topTime::before {
  content: "·";
  margin: 0 8px;
}

/* ──[ · ]── the greeting · name on a meridian hairline, one sentence, two
       actions, one sample-marked proof panel. */
.desktop-greeting {
  position: fixed;
  inset: 42px 0 0;
  z-index: 4;
  display: flex;
  align-items: center;
  padding: 0 118px 120px clamp(28px, 9vw, 132px);
  pointer-events: none; /* only the hero content is interactive */
}
/* FW-1.5 (W3, 17 Jul 2026): the interim hero scrim is retired - the redrawn
   scene owns its depth via the baked #fwDeepLeft grade in the wallpaper SVG. */
.greeting-inner {
  position: relative;
  max-width: 760px;
  pointer-events: auto;
}
/* Meridian hairline + one cyan node: the authored observatory detail. */
.greeting-inner::before {
  content: "";
  position: absolute;
  left: -34px;
  top: -46px;
  bottom: -38px;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(111, 227, 242, 0.35) 18%,
    rgba(176, 200, 228, 0.16) 60%,
    transparent
  );
}
.greeting-inner::after {
  content: "";
  position: absolute;
  left: -37px;
  top: 34px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fw-accent);
  box-shadow: 0 0 0 4px rgba(111, 227, 242, 0.12);
}
.desktop-greeting h1 {
  margin: 0;
  font: var(--type-display);
  letter-spacing: var(--type-display-ls);
  color: var(--fw-paper);
  white-space: nowrap;
  text-shadow: 0 2px 24px rgba(4, 9, 18, 0.55);
}
/* body.calm-effects h1's blanket letter-spacing reset OUTRANKS the bare
   .desktop-greeting h1 above → re-state ONLY the display role's tracking at
   calm specificity; everything else on the hero stays calm-owned. */
body.calm-effects .desktop-greeting h1 {
  letter-spacing: var(--type-display-ls);
}
.greeting-lede {
  margin: 22px 0 0;
  max-width: 52ch;
  font: var(--type-lede);
  letter-spacing: var(--type-lede-ls);
  color: var(--fw-paper-72);
  text-shadow: 0 1px 14px rgba(4, 9, 18, 0.5);
}
.greeting-actions {
  margin-top: 34px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.greeting-btn {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border: 0;
  margin: 0;
  font: var(--type-label);
  letter-spacing: var(--type-label-ls);
  padding: 0 26px;
  border-radius: 12px;
  cursor: pointer;
  transition:
    transform var(--motion-focus),
    box-shadow var(--motion-focus),
    background var(--motion-focus),
    border-color var(--motion-focus),
    color var(--motion-focus);
}
/* Primary: the one warm call on the cold scene - a flat lit surface now, not
   a bevelled pill. FW-5.4: gradient bevel + heavy bloom retired; the light is
   ambient and restrained, the surface crisp. Same recipe as .reel-cta. */
.greeting-btn-primary {
  background: #57c8ea;
  color: #04222d;
  font-weight: 750;
  box-shadow: 0 6px 22px rgba(38, 160, 215, 0.3);
}
.greeting-btn-primary:hover {
  background: #6fd6f2;
  box-shadow: 0 8px 26px rgba(56, 178, 232, 0.36);
}
.greeting-btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 3px 12px rgba(28, 155, 214, 0.3);
}
/* Secondary: quiet frosted glass - present, but it never competes. */
.greeting-btn-secondary {
  color: var(--fw-paper);
  border: 1px solid rgba(200, 218, 238, 0.3);
  background: rgba(9, 17, 30, 0.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  padding-inline: 25px;
}
.greeting-btn-secondary:hover {
  transform: translateY(-2px);
  border-color: rgba(125, 216, 247, 0.55);
  background: rgba(15, 26, 43, 0.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 10px 30px rgba(3, 12, 20, 0.4);
}
.greeting-btn-secondary:active {
  transform: translateY(0);
}
.greeting-btn:focus-visible {
  outline: 2px solid var(--fw-accent);
  outline-offset: 3px;
}
.greeting-proof {
  margin-top: 46px;
  display: inline-flex;
  gap: 18px;
  align-items: center;
  padding: 16px 22px 16px 16px;
  border-radius: 12px;
  border: 1px solid var(--fw-line);
  background: rgba(9, 17, 30, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.greeting-proof-frame {
  flex: 0 0 148px;
  width: 148px;
  height: 86px;
  border-radius: 7px;
  border: 1px solid var(--fw-line);
  overflow: hidden;
  background: rgba(9, 17, 30, 0.5);
}
.greeting-proof-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.greeting-proof-text {
  display: block;
}
.greeting-proof-tags {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 7px;
}
.greeting-chip {
  font: var(--type-chip);
  letter-spacing: var(--type-chip-ls);
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  color: var(--fw-paper-55);
  border: 1px solid var(--fw-line);
  white-space: nowrap;
}
.greeting-chip-sample {
  color: rgba(111, 227, 242, 0.75);
  border-color: rgba(111, 227, 242, 0.3);
}
.greeting-proof-title {
  display: block;
  font: var(--type-title);
  letter-spacing: var(--type-title-ls);
  color: var(--fw-paper);
}
.greeting-proof-meta {
  display: block;
  margin-top: 4px;
  font: var(--type-winmeta);
  letter-spacing: var(--type-winmeta-ls);
  /* FW-1.R: the outcome line is part of the proof - it must be readable,
     not furniture (was --fw-paper-38). */
  color: var(--fw-paper-55);
}
@media (max-width: 1100px) {
  .desktop-greeting {
    padding-left: clamp(26px, 7vw, 72px);
    padding-right: 118px;
  }
}
/* FW-2 gate (200% zoom / short viewports): centered flex overflows both ways
   when the stack is taller than the viewport, painting the name over the
   topbar. Pin to the top and scroll instead. */
@media (max-height: 620px) {
  .desktop-greeting {
    align-items: flex-start;
    overflow-y: auto;
    padding-top: 22px;
    padding-bottom: 70px;
  }
}
@media (max-width: 640px) {
  .desktop-greeting {
    padding: 0 22px 110px;
  }
  .greeting-inner::before {
    left: -13px;
    top: -30px;
    bottom: -24px;
  }
  .greeting-inner::after {
    left: -15.5px;
    top: 24px;
    width: 6px;
    height: 6px;
  }
  .desktop-greeting h1 {
    white-space: normal;
  }
  .greeting-actions {
    gap: 10px;
  }
  .greeting-btn {
    min-height: 38px;
    padding-inline: 18px;
  }
  .greeting-btn-secondary {
    padding-inline: 17px;
  }
  .greeting-proof {
    margin-top: 34px;
    gap: 14px;
    padding: 13px 16px 13px 13px;
    display: flex;
  }
  .greeting-proof-frame {
    flex-basis: 96px;
    width: 96px;
    height: 64px;
  }
}
/* Keep the full wallpaper behind the greeting on the mobile shell. */
@media (max-width: 900px) {
  body.calm-effects .wallpaper,
  body.mobile-shell .wallpaper {
    inset: 0 !important;
    opacity: 1 !important;
  }
}

/* ──[ · ]── dock · five items on a near-silent flat strip over one meridian
       hairline. FW-1.6 "Meridian Dock": the cursor is a passing lens. ONE
       custom property (--dock-lens-x, dock-local px, set by the single
       pointer listener in app.js) drives everything below - a raised-cosine
       swell through the icons, neighbours yielding space, the hairline
       brightening locally, and a soft transit light rising toward the hovered
       icon. Rest state (--dock-lens-x unset) is exactly the silent strip: the
       -9999px fallback puts every icon outside the lens. ★ */
#dock,
#dock.dock-shelf-v7,
body.calm-effects #dock.dock-shelf-v7,
body.mobile-shell #dock.dock-shelf-v7 {
  left: 50% !important;
  right: auto !important;
  bottom: 16px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  padding: 6px 10px 12px !important;
  gap: 14px !important;
  transform: translateX(-50%) !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible !important;
  animation: none !important;
}
/* FW-1.6: the transit light - a small pool of sky light that follows the
   lens along the meridian and bows up toward the hovered icon. */
#dock::before,
#dock.dock-shelf-v7::before,
body.calm-effects #dock.dock-shelf-v7::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  /* FW-1.6 perf ★ the lens position drives `transform`, NOT `left` - `left`
     stays static so the hot path (--dock-lens-x updates on every pointermove)
     never forces a layout, only compositing. translateX folds in the same
     -50% self-centering the old `left` + translateX(-50%) pair produced. */
  left: 0 !important;
  /* Bottom edge sits exactly on the meridian hairline (dock bottom + 4px). */
  bottom: 4px !important;
  top: auto !important;
  width: 148px !important;
  height: 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  /* Launchbat: the hover cue is light IN the line, nothing above it. The
     ring-arc "bow" tried here first rendered as a clipped hump at 1x and was
     killed on owner review (18 Jul) - the cue is now a soft pool gathered
     under the lens; the crisp lit segment lives on the hairline itself
     (::after below). */
  background: radial-gradient(50px 8px at 50% 100%, rgba(111, 227, 242, 0.2), transparent 72%) no-repeat !important;
  box-shadow: none !important;
  transform: translateX(calc(var(--dock-lens-x, -999) * 1px - 50%)) translateY(calc(var(--dock-lens-on, 0) * -1px)) !important;
  opacity: var(--dock-lens-on, 0) !important;
  transition:
    opacity var(--motion-focus),
    transform 180ms ease !important;
  filter: none !important;
  pointer-events: none !important;
  animation: none !important;
}
#dock::after,
#dock.dock-shelf-v7::after,
body.calm-effects #dock.dock-shelf-v7::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 4px !important;
  top: auto !important;
  height: 1px !important;
  border-radius: 0 !important;
  /* FW-1.6: first layer is the local brightening under the lens; the base
     hairline beneath it is unchanged from the rest state. */
  background:
    radial-gradient(
        26px 1.5px at calc(var(--dock-lens-x, -999) * 1px) 50%,
        rgba(111, 227, 242, calc(0.9 * var(--dock-lens-on, 0))),
        rgba(111, 227, 242, calc(0.55 * var(--dock-lens-on, 0))) 55%,
        transparent 78%
      )
      no-repeat,
    radial-gradient(
        72px 2px at calc(var(--dock-lens-x, -999) * 1px) 50%,
        rgba(111, 227, 242, calc(0.35 * var(--dock-lens-on, 0))),
        transparent 74%
      )
      no-repeat,
    linear-gradient(
      90deg,
      transparent,
      rgba(111, 227, 242, 0.34) 30%,
      rgba(111, 227, 242, 0.34) 70%,
      transparent
    ) !important;
  filter: none !important;
  opacity: 1 !important;
  pointer-events: none;
}
#dock button,
#dock.dock-shelf-v7 button,
#dock.dock-shelf-v7 button[data-mobile-primary="true"],
#dock.dock-shelf-v7 button.dock-hero-app,
#dock.dock-shelf-v7 button.dock-group-start,
body.calm-effects #dock.dock-shelf-v7 button,
body.mobile-shell #dock.dock-shelf-v7 button[data-mobile-primary="true"] {
  flex: 0 0 42px !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
  /* FW-1.6: the swell is a raised cosine of the button's distance from the
     lens - one wave passing through the row, not per-icon pop-ups. Each
     button knows only its own centre (--fw-btn-cx, set once per layout by
     the dock owner); everything else derives from --dock-lens-x. */
  --fw-lens-d: calc((var(--dock-lens-x, -9999) - var(--fw-btn-cx, 0)) / 150);
  --fw-lens-n: clamp(-1, var(--fw-lens-d), 1);
  --fw-lens: calc((cos(calc(var(--fw-lens-n) * 180deg)) + 1) / 2);
  /* Launchbat: light travels with the wave - each icon brightens by its own
     cosine falloff, so the row reads as one light passing through it rather
     than a per-icon on/off. Rest value matches the old --fw-paper-55. */
  color: rgb(232 226 212 / calc(0.55 + var(--fw-lens) * 0.4)) !important;
  transform-origin: 50% 100%;
  /* Yield field: n·(1−|n|) - ZERO at the lens, peaking at the neighbours,
     zero again at the wave's edge. The old lens·sign(n) form peaked ON the
     hovered icon, so crossing its midline flipped a ±5px shove (owner:
     "janky", 19 Jul). Now the icon under the cursor is the stillest thing
     in the row and only neighbours breathe aside. */
  --fw-yield: calc(var(--fw-lens-n) * (1 - var(--fw-lens-n) * sign(var(--fw-lens-n))) * -14px);
  transform: translateX(var(--fw-yield)) translateY(calc(var(--fw-lens) * -6px)) scale(calc(1 + var(--fw-lens) * 0.28)) !important;
  transition:
    color var(--motion-focus),
    transform 90ms linear !important;
  animation: none !important;
}
/* Launchbat: the press is physical - the swollen icon dips under the finger,
   quicker down than up. Same formula, one extra factor; transform-only. */
#dock button:active,
#dock.dock-shelf-v7 button:active,
body.calm-effects #dock.dock-shelf-v7 button:active {
  transform: translateX(var(--fw-yield)) translateY(calc(var(--fw-lens) * -6px + 1px))
    scale(calc((1 + var(--fw-lens) * 0.28) * 0.94)) !important;
  transition:
    color var(--motion-focus),
    transform 70ms ease-out !important;
}
/* Launchbat: launching answers with light, not chrome - a brief pulse that
   spreads along the meridian from under the launched icon and dies. */
#dock button.launch-pulse::before,
#dock.dock-shelf-v7 button.launch-pulse::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: -10px !important;
  width: 30px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: radial-gradient(closest-side, rgba(111, 227, 242, 0.55), transparent) !important;
  /* opacity/transform stay UN-important ✗ an !important here would outrank the
     keyframes (important beats animations in the cascade) and freeze the flash
     invisible. The suppressor above exempts .launch-pulse, so nothing else
     competes for these two properties. */
  transform: translateX(-50%) scaleX(0.5);
  opacity: 0;
  pointer-events: none !important;
  animation: kyrLaunchPulse 0.42s cubic-bezier(0.55, 0, 0.6, 1) both !important;
}
@keyframes kyrLaunchPulse {
  0% {
    opacity: 0.9;
    transform: translateX(-50%) scaleX(0.45);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) scaleX(2.1);
  }
}
/* FW-1.6: keyboard focus keeps the same swell + meridian light; the ring
   itself is thin and offset - the light is the primary focus signal. */
#dock button:focus-visible,
#dock.dock-shelf-v7 button:focus-visible,
body.calm-effects #dock.dock-shelf-v7 button:focus-visible {
  /* At 3px offset this sat ~48px around a 24px glyph - a big empty ring
     floating clear of the icon, which reads as a stuck artifact rather than a
     focus mark. Hugging the button footprint and dropping the alpha lets it
     sit ON the lens, which is what the comment below always intended: the
     light leads, the ring confirms. It stays visible - this is the keyboard
     user's only "you are here", and after Escape closes a window focus really
     is on this button. ★ */
  outline: 1.5px solid rgba(111, 227, 242, 0.5) !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
  /* Launchbat: the focus ring is the lens itself - a circle, not the button's
     rounded rectangle. The button paints nothing, so the radius is free. */
  border-radius: 50% !important;
}
/* FW-1.6: the lens lights the hovered icon - light indicates focus; scale
   merely assists it. */
#dock button:hover svg,
#dock button:focus-visible svg {
  color: var(--fw-paper);
}
/* Reduced motion (kill switch): no wave, no bow - instant local highlight plus label. */
@media (prefers-reduced-motion: reduce) {
  #dock button,
  #dock.dock-shelf-v7 button,
  #dock.dock-shelf-v7 button[data-mobile-primary="true"],
  body.calm-effects #dock.dock-shelf-v7 button,
  body.calm-effects #dock.dock-shelf-v7 button[data-mobile-primary="true"] {
    transform: none !important;
  }
  #dock::before,
  #dock.dock-shelf-v7::before {
    transform: translateX(-50%) !important;
  }
  #dock button.launch-pulse::before,
  #dock.dock-shelf-v7 button.launch-pulse::before {
    animation: none !important;
    opacity: 0 !important;
  }
}
/* Coarse pointers (kill switch): no magnification at all - stable tap targets,
   active state via the meridian light only (the JS owner also skips binding). */
@media (pointer: coarse) {
  #dock button,
  #dock.dock-shelf-v7 button {
    transform: none !important;
  }
}

/* About source mode: a believable read-only Markdown editor. It keeps the
   compact restraint of a native Linux editor, then improves it with KyrOS's
   typography, registered active line, and quieter syntax hierarchy. */
#experience:not(.is-reading) {
  --kyr-ed-bg: #151d28;
  --kyr-ed-chrome: #202b39;
  --kyr-ed-elevated: #1b2634;
  --kyr-ed-text: #d7e0eb;
  --kyr-ed-text-2: #91a0b2;
  --kyr-ed-punct: #7c8b9e;
  --kyr-ed-heading: #79c7f2;
  --kyr-ed-strong: #f0f4f8;
  --kyr-ed-em: #c7b7f3;
  --kyr-ed-marker: #79d99a;
  --kyr-ed-active-line: rgba(121, 199, 242, 0.065);
  --kyr-ed-size: 13.25px;
  --kyr-ed-leading: 1.72;
  --kyr-ed-pad-x: 24px;
  --kyr-ed-pad-y: 16px;
  --kyr-ed-gutter-w: 46px;
}
#experience:not(.is-reading) > .toolbar {
  min-height: 46px;
  padding: 0 10px 0 14px;
  gap: 7px;
  background: linear-gradient(180deg, rgba(39, 53, 70, 0.98), rgba(31, 44, 59, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    inset 0 -1px 0 rgba(121, 199, 242, 0.12);
}
#experience:not(.is-reading) > .toolbar > span.about-title-source {
  position: relative;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px 0 1px;
  color: #cbd6e2;
  font: 600 11.5px/1 var(--kyr-ed-mono);
  letter-spacing: 0;
  white-space: nowrap;
}
#experience:not(.is-reading) > .toolbar > span.about-title-source::before {
  width: 7px;
  height: 7px;
  background: #79c7f2;
  box-shadow: 0 0 0 3px rgba(121, 199, 242, 0.08);
}
#experience:not(.is-reading) > .toolbar > span.about-title-source::after {
  content: "";
  position: absolute;
  right: 8px;
  bottom: -1px;
  left: 0;
  height: 2px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, rgba(121, 199, 242, 0.9), rgba(121, 199, 242, 0.18));
}
#experience:not(.is-reading) .about-source-toggle,
#experience:not(.is-reading) .toolbar-icon.copy-md {
  min-height: 32px;
  height: 32px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
  color: #b7c3d0;
  transform: none;
}
#experience:not(.is-reading) .about-source-toggle {
  padding: 0 12px;
  font: 650 10.5px/1 var(--font-body);
  letter-spacing: 0.015em;
  text-transform: none;
}
#experience:not(.is-reading) .toolbar-icon.copy-md {
  min-width: 44px;
  padding: 0 8px;
}
#experience:not(.is-reading) .about-source-toggle:hover,
#experience:not(.is-reading) .about-source-toggle:focus-visible,
#experience:not(.is-reading) .toolbar-icon.copy-md:hover,
#experience:not(.is-reading) .toolbar-icon.copy-md:focus-visible {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.065);
  color: #edf4fb;
  box-shadow: none;
  transform: none;
}
#experience:not(.is-reading) .about-source-toggle:focus-visible,
#experience:not(.is-reading) .toolbar-icon.copy-md:focus-visible {
  outline: 2px solid rgba(121, 199, 242, 0.62);
  outline-offset: -2px;
}
#experience:not(.is-reading) .toolbar-icon.copy-md.copied {
  border-color: transparent;
  background: rgba(121, 217, 154, 0.08);
  box-shadow: none;
  color: #9be3b4;
}
#experience:not(.is-reading) .editor {
  padding-block: var(--kyr-ed-pad-y);
  border-top: 0;
  background:
    linear-gradient(90deg, rgba(7, 12, 19, 0.16) 0, rgba(7, 12, 19, 0.16) 64px, transparent 64px), var(--kyr-ed-bg);
  font-weight: 450;
  tab-size: 2;
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}
#experience:not(.is-reading) .notes.md-doc {
  min-width: max-content;
}
#experience:not(.is-reading) .md-row {
  grid-template-columns: var(--kyr-ed-gutter-w) minmax(max-content, 1fr);
  min-height: calc(var(--kyr-ed-size) * var(--kyr-ed-leading));
  column-gap: 16px;
  padding-right: var(--kyr-ed-pad-x);
}
#experience:not(.is-reading) .md-gutter {
  padding-right: 12px;
  border-right: 1px solid rgba(145, 160, 178, 0.11);
  color: #6f7d8e;
  font-size: 0.78em;
  opacity: 0.8;
}
#experience:not(.is-reading) .md-line {
  padding-inline: 2px 12px;
  text-rendering: optimizeLegibility;
}
#experience:not(.is-reading) .md-row.is-heading,
#experience:not(.is-reading) .md-row.is-h1 {
  padding-top: 0;
  padding-bottom: 0;
}
#experience:not(.is-reading) .md-h1,
#experience:not(.is-reading) .md-h2,
#experience:not(.is-reading) .md-h3,
#experience:not(.is-reading) .md-h4,
#experience:not(.is-reading) .md-h5,
#experience:not(.is-reading) .md-h6 {
  font-size: 1em;
  font-weight: 750;
}
#experience:not(.is-reading) .md-row.is-active {
  background: linear-gradient(90deg, rgba(121, 199, 242, 0.095), rgba(121, 199, 242, 0.025) 72%, transparent);
  box-shadow: inset 2px 0 0 rgba(121, 199, 242, 0.72);
}
#experience:not(.is-reading) .md-row.is-active .md-gutter {
  color: #a8c9dd;
}
#experience:not(.is-reading) .md-code-span {
  padding: 0.06em 0.3em;
  border: 1px solid rgba(121, 217, 154, 0.1);
  border-radius: 4px;
  background: rgba(121, 217, 154, 0.055);
}
@media (max-width: 640px) {
  #experience:not(.is-reading) {
    --kyr-ed-size: 12.5px;
    --kyr-ed-pad-x: 14px;
    --kyr-ed-gutter-w: 34px;
  }
  #experience:not(.is-reading) .md-row {
    column-gap: 10px;
  }
  #experience:not(.is-reading) > .toolbar > span.about-title-source {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
/* FW-1.6: the label is small, calm metadata above the lens - no bubble.
   Positioned by JS from the dock's rest geometry (left = the button's rest
   centre, top = the dock's top edge) so it never reads a mid-swell rect; the
   transform lifts it clear of the fully swollen icon. */
#dockLabel {
  position: fixed;
  /* Label text swaps once per icon-crossing; `contain` scopes that ONE
     layout pass to this node - the wave itself stays layout-free. ★ */
  contain: layout paint;
  z-index: 60;
  transform: translate(-50%, calc(-100% - 22px)) translateY(3px);
  font: 500 11px/1.4 var(--font-body);
  letter-spacing: 0.05em;
  color: var(--fw-paper-78);
  /* The label may sit over an open window's content - a soft dark bloom
     keeps it legible there without ever reading as a tooltip bubble. */
  text-shadow:
    0 1px 2px rgba(4, 10, 20, 0.85),
    0 0 12px rgba(4, 10, 20, 0.7);
  opacity: 0;
  transition:
    opacity var(--motion-focus),
    transform var(--motion-focus);
  pointer-events: none;
}
#dockLabel.show {
  opacity: 1;
  transform: translate(-50%, calc(-100% - 22px)) translateY(0);
}
#dock button:hover,
#dock button:focus-visible,
#dock.dock-shelf-v7 button:hover,
#dock.dock-shelf-v7 button:focus-visible,
body.calm-effects #dock.dock-shelf-v7 button:hover,
body.calm-effects #dock.dock-shelf-v7 button:focus-visible {
  background: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  color: var(--fw-paper) !important;
}
#dock button.active,
#dock.dock-shelf-v7 button.active,
body.calm-effects #dock.dock-shelf-v7 button.active {
  background: none !important;
  border-color: transparent !important;
  color: var(--fw-paper) !important;
}
#dock button.active::after,
#dock.dock-shelf-v7 button.active::after,
body.calm-effects #dock.dock-shelf-v7 button.active::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  /* Launchbat: the open-window marker is a star ON the meridian - dot centre
     seated exactly on the hairline (button bottom sits 12px above the dock
     edge, the hairline 4.5px above it), with a faint halo so it reads as a
     point of light, not a painted period. It rides the swell when hovered. */
  bottom: -9.5px !important;
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  transform: translateX(-50%) !important;
  background: var(--fw-accent) !important;
  box-shadow: 0 0 7px 1.5px rgba(111, 227, 242, 0.38) !important;
  display: block !important;
  opacity: 1 !important;
}
#dock svg,
#dock.dock-shelf-v7 button svg {
  width: 21px !important;
  height: 21px !important;
  stroke-width: 1.5 !important;
}
#dock .dock-mobile-label,
#dock.dock-shelf-v7 .dock-mobile-label {
  display: none !important;
}
/* FW-1.6: the dock's hover/focus label is #dockLabel; the pseudo-element
   tooltips are suppressed wholesale in the JS-tooltip-ownership rule above. */
/* Launchbat mobile: no hover means no lens and no #dockLabel - so the labels
   live under the icons, tab-bar style, in the same quiet voice. Column stays
   inside a 320px viewport (5×52 + 4×6 + 20 padding = 304px) and each target
   is 52×58px, above the 44px floor. The active star still sits on the
   meridian, now beneath the label - icon, name, and star share one column. */
@media (pointer: coarse), (max-width: 640px) {
  #dock,
  #dock.dock-shelf-v7,
  body.mobile-shell #dock.dock-shelf-v7 {
    bottom: 10px !important;
    gap: 6px !important;
  }
  #dock button,
  #dock.dock-shelf-v7 button,
  body.calm-effects #dock.dock-shelf-v7 button,
  body.mobile-shell #dock.dock-shelf-v7 button,
  body.mobile-shell #dock.dock-shelf-v7 button[data-mobile-primary="true"],
  body.calm-effects #dock.dock-shelf-v7 button[data-mobile-primary="true"] {
    flex: 0 0 52px !important;
    width: 52px !important;
    min-width: 52px !important;
    height: 58px !important;
    display: grid !important;
    grid-template-rows: 1fr auto !important;
    place-items: center !important;
    row-gap: 1px !important;
    padding: 7px 0 6px !important;
  }
  #dock .dock-mobile-label,
  #dock.dock-shelf-v7 .dock-mobile-label,
  body.calm-effects #dock.dock-shelf-v7 .dock-mobile-label,
  body.mobile-shell #dock.dock-shelf-v7 .dock-mobile-label {
    display: block !important;
    font: 500 9.5px/1 var(--font-body) !important;
    letter-spacing: 0.04em !important;
    color: inherit !important;
    text-transform: none !important;
  }
}

/* Shell refinements. */
/* Brand: no accent tint, no gradient tile behind the mark. */
body.calm-effects .topbar .brand b,
body.calm-effects .brand b,
.topbar .brand b {
  color: var(--fw-paper);
  font: var(--type-wordmark);
  letter-spacing: var(--type-wordmark-ls);
}
body.calm-effects .topbar .brand .mark,
.topbar .brand .mark {
  background: none;
  box-shadow: none;
  border-radius: 0;
}
/* FW-1.2: the topbar clock is the ONE instrument readout - JetBrains Mono at
   11.5px with +1.2 tracking (the S3 voice). No other readout gets mono. */
#dateText,
#topTime {
  font: var(--type-clock);
  letter-spacing: var(--type-clock-ls);
}
/* Night grade: FW-1.5 owns the redrawn scene; until then the existing zen
   wallpaper is graded toward the approved still's deep mineral blue so the
   greeting never sits on a bright sky. */
body.calm-effects .wallpaper::after,
.wallpaper::after {
  background:
    linear-gradient(
      180deg,
      rgba(7, 14, 28, 0.62),
      rgba(8, 15, 28, 0.44) 42%,
      rgba(7, 13, 25, 0.62) 74%,
      rgba(5, 9, 18, 0.8)
    ),
    radial-gradient(circle at 50% 38%, transparent 0 38%, rgba(0, 0, 0, 0.22) 100%);
}

/* Recent Work and case-study reading view. */
.work-head {
  margin: 2px 2px 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(200, 218, 238, 0.12);
}
.work-head h1 {
  margin: 4px 0 6px;
  font: 700 26px/1.15 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--text);
}
.work-head p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
  max-width: 62ch;
}
.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 22px;
  align-items: stretch;
}
/* Recent Work tile: frosted surface + one accent hairline on top. The hover
   ring is drawn with TWO shadows (inset hairline + outer glow), not
   border-color - the old border swap was clipped by the media edge, so the
   ring never showed on all four sides. */
.work-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.018));
  border: 1px solid rgba(200, 218, 238, 0.13);
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  transition:
    transform var(--motion-panel),
    box-shadow var(--motion-panel),
    border-color var(--motion-focus),
    background var(--motion-focus);
}
.work-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 22px;
  right: 22px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--card-accent, #62d0f7), transparent);
  opacity: 0.35;
  transition: opacity var(--motion-focus);
  z-index: 2;
}
.work-card:hover,
.work-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(200, 218, 238, 0.22);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--card-accent, #62d0f7) 55%, transparent),
    0 22px 56px rgba(0, 0, 0, 0.5);
  outline: none;
}
.work-card:hover::before,
.work-card:focus-visible::before {
  opacity: 1;
}
.work-card:focus-visible {
  outline: 2px solid var(--card-accent, #62d0f7);
  outline-offset: 3px;
}
.work-card-media {
  margin: 10px 10px 0;
  flex: none;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 13px;
  border: 1px solid rgba(200, 218, 238, 0.1);
  background: #0a1430;
}
.work-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.work-card:hover .work-card-media img,
.work-card:focus-visible .work-card-media img {
  transform: scale(1.035);
}
.work-card-body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 16px 20px 18px;
  flex: 1;
}
.work-kicker {
  margin: 0;
  font: 700 10.5px/1.4 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
  display: flex;
  align-items: center;
  gap: 8px;
}
.sample-chip {
  margin-left: auto;
  font: 700 9.5px/1 var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--cyan);
  border: 1px solid rgba(114, 243, 255, 0.4);
  border-radius: 999px;
  padding: 3px 8px;
}
.work-card h3 {
  margin: 0;
  font: 700 19px/1.22 var(--font-display);
  letter-spacing: -0.005em;
  color: var(--text);
}
.work-card-problem {
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.58;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.work-card-role {
  margin: 0;
  font: 700 11px/1.5 var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--muted-2);
}

/* Shared shell geometry. */
:root {
  --shell-window: rgba(18, 29, 43, 0.97);
  --shell-panel: rgba(27, 40, 56, 0.82);
  --shell-panel-strong: rgba(31, 46, 64, 0.94);
  --shell-line: rgba(170, 196, 218, 0.18);
  --shell-line-strong: rgba(125, 216, 247, 0.46);
  --shell-radius: 12px;
  --shell-control-h: 38px;
}
.win button .kyr-icon,
.mini-player button .kyr-icon {
  flex: 0 0 auto;
}

/* Chrome is quieter than content, with one registered cyan edge. */
.win {
  background: var(--shell-window);
  border-color: rgba(125, 216, 247, 0.44);
  border-radius: var(--shell-radius);
  box-shadow: 0 24px 70px rgba(2, 8, 18, 0.62);
}
.win > .bar {
  min-height: 44px;
  background: rgba(31, 45, 63, 0.96);
  border-bottom: 1px solid var(--shell-line);
}
.win-controls,
.win-controls button {
  height: 100%;
}

/* Task-fitted defaults: content hubs, readers and utilities no longer inherit
   one near-desktop slab. Mobile-shell rules still own narrow screens. */
#home.win {
  width: min(900px, calc(100vw - 44px));
  height: min(620px, calc(100vh - 116px));
}
#experience.win {
  width: min(880px, calc(100vw - 44px));
  height: min(620px, calc(100vh - 116px));
}
#player.win {
  container: player / inline-size;
  width: min(820px, calc(100vw - 44px));
  height: min(590px, calc(100vh - 116px));
  min-height: 500px;
}
#shortcuts.win {
  width: min(760px, calc(100vw - 44px));
  height: min(590px, calc(100vh - 116px));
}
#settings.win {
  width: min(700px, calc(100vw - 36px));
  height: min(640px, calc(100vh - 116px));
}
#aboutOS.win {
  width: min(760px, calc(100vw - 44px));
  height: min(610px, calc(100vh - 116px));
  min-width: 0;
}
#caseStudy.win {
  width: min(920px, calc(100vw - 44px));
  height: min(760px, calc(100vh - 92px));
}
#concepts.win,
#trash.win {
  width: min(680px, calc(100vw - 44px));
  height: min(520px, calc(100vh - 116px));
}
#terminal.win {
  width: min(720px, calc(100vw - 44px));
  height: min(470px, calc(100vh - 116px));
}
#command.win {
  width: min(640px, calc(100vw - 36px));
}

/* Home: Start Here is a hierarchy, not an equal-weight app grid. */
#home .main {
  padding: clamp(24px, 4cqw, 34px);
}
#home .main > h1 {
  max-width: 14ch;
  margin: 0;
  font: 700 clamp(38px, 5.1cqw, 54px) / 0.98 var(--font-display);
  letter-spacing: -0.035em;
}
#home .main > p {
  max-width: 58ch;
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.5;
}
#home .tiles {
  /* min() on every track floor. A bare `minmax(250px, …)` cannot shrink below
     its floor, so 250 + 150 + 150 + gaps set a hard 574px minimum and the
     tiles simply overflowed the window between ~460px and ~620px wide - the
     container breakpoints only rescued it below 430px. Wrapping each floor in
     min(…, 100%) lets the tracks give way when the space genuinely isn't
     there, so the grid degrades instead of spilling. ★ */
  grid-template-columns: minmax(min(250px, 100%), 1.25fr) repeat(2, minmax(min(150px, 100%), 0.75fr));
  gap: 12px;
  margin-top: 24px;
}
#home .tile {
  border-radius: var(--shell-radius);
  background: var(--shell-panel);
  box-shadow: none;
  transform: none;
}
#home .tile-primary {
  grid-row: span 2;
  min-height: 266px;
  justify-content: space-between;
  background: linear-gradient(145deg, rgba(31, 54, 75, 0.96), rgba(20, 33, 49, 0.96));
}
#home .tile-support {
  min-height: 128px;
}
#home .tile-explore {
  min-height: 44px;
  flex-direction: row;
  align-items: center;
  padding: 10px 14px;
}
#home .tile-explore .folder {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
}
#home .tile-explore .kyr-icon {
  width: 18px;
  height: 18px;
}
#home .tile:hover,
#home .tile:focus-visible {
  transform: translateY(-2px);
  border-color: var(--shell-line-strong);
  background: var(--shell-panel-strong);
  box-shadow: 0 14px 34px rgba(2, 8, 18, 0.34);
  outline: none;
}
#home .tile:focus-visible {
  box-shadow:
    0 0 0 2px var(--kyr-accent-2),
    0 14px 34px rgba(2, 8, 18, 0.34);
}

/* Work: one element owns the rectangle. No pseudo-backplate or outside focus
   outline can be clipped by the grid/window. */
.work-head {
  margin: 0 0 20px;
  padding-bottom: 16px;
}
.work-grid {
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 2px;
}
.work-card {
  border: 1px solid var(--shell-line);
  border-radius: var(--shell-radius);
  background: var(--shell-panel);
  box-shadow: none;
  overflow: clip;
  transform: none;
}
.work-card::before,
.work-card::after {
  content: none !important;
  display: none !important;
}
.work-card-featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(240px, 40%) 1fr;
}
.work-card-featured .work-card-media {
  aspect-ratio: auto;
  min-height: 250px;
  margin: 0;
  border: 0;
  border-right: 1px solid var(--shell-line);
  border-radius: 0;
}
.work-card:hover,
.work-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--card-accent, var(--kyr-accent-2));
  background: var(--shell-panel-strong);
  box-shadow:
    0 14px 38px rgba(2, 8, 18, 0.44),
    inset 0 0 0 1px color-mix(in srgb, var(--card-accent, var(--kyr-accent-2)) 58%, transparent);
  outline: none;
}
.work-card-more {
  min-height: 34px;
  opacity: 0.72;
}
.work-card:hover .work-card-more,
.work-card:focus-visible .work-card-more {
  opacity: 1;
}

/* Settings is one application. Accessibility is no longer an orphaned dialog. */
#settings.win > .settings-body {
  height: calc(100% - 44px);
  max-height: none;
  padding: 0;
  display: grid;
  grid-template-columns: 164px minmax(0, 1fr);
  /* minmax(0, 1fr), not 1fr: a grid row defaults to min-height:auto, so it
     grows to fit its content instead of capping at the body's height. That is
     what stopped Settings scrolling - .settings-main was sized to its full
     content (1337px inside a 640px window), its own `overflow: auto` never had
     anything to scroll, and everything past the fold was clipped by the
     `overflow: hidden` below. Anything down there, like the content editor's
     controls, could be seen but never clicked. ★ */
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
  background: transparent;
}
#settings .settings-nav {
  padding: 18px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 0;
  overflow-y: auto; /* the category list is short, but never let it clip either */
  background: rgba(12, 22, 34, 0.72);
  border-right: 1px solid var(--shell-line);
}
#settings .settings-nav button {
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  justify-content: flex-start;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}
#settings .settings-nav button:hover,
#settings .settings-nav button:focus-visible,
#settings .settings-nav button.active {
  color: var(--text);
  background: rgba(104, 151, 194, 0.18);
  outline: none;
}
/* No accent bar on the selected category. The filled pill and the brightened
   label already say "you are here"; a cyan rule down one edge was a second
   answer to a question nobody asked twice, and it sat proud of the pill's
   rounded corner. ★ */
#settings .settings-main {
  min-width: 0;
  min-height: 0; /* let the row cap it so `overflow: auto` can actually scroll */
  overflow: auto;
  padding: 26px 28px 32px;
  scrollbar-gutter: stable;
}
#settings .settings-section {
  display: none;
}
#settings .settings-section.active {
  display: block;
}
#settings .settings-section > h2 {
  margin: 6px 0;
  font: 700 28px/1.08 var(--font-display);
  letter-spacing: -0.02em;
}
#settings .settings-section > p {
  margin: 0 0 20px;
  line-height: 1.5;
}
#settings .settings-panel,
#settings .prefs-section {
  margin: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--shell-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#settings .settings-section > .settings-panel + .settings-panel,
#settings .settings-section > .settings-panel + .settings-io-host,
#settings .settings-io-host + .settings-panel {
  margin-top: 18px;
}
#settings .settings-panel > h3,
#settings .prefs-section > h3 {
  margin: 16px 0 8px;
  color: var(--text);
}
#settings .prefs-panel {
  display: block;
}
#settings .prefs-row {
  min-height: 76px;
  padding: 14px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  border-bottom: 1px solid rgba(170, 196, 218, 0.13);
}
#settings .prefs-row-label {
  margin: 0 0 3px;
  color: var(--text);
  font-weight: 700;
}
#settings .prefs-row-help {
  margin: 0;
  max-width: 45ch;
  font-size: 12px;
  line-height: 1.42;
}
#settings .prefs-segmented {
  display: flex;
  border: 1px solid rgba(170, 196, 218, 0.3);
  border-radius: 9px;
  overflow: hidden;
}
#settings .prefs-segmented button {
  min-width: 48px;
  min-height: 36px;
  padding: 0 9px;
  border: 0;
  border-right: 1px solid rgba(170, 196, 218, 0.18);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font: 700 10px/1 var(--font-mono);
}
#settings .prefs-segmented button:last-child {
  border-right: 0;
}
#settings .prefs-segmented button:hover,
#settings .prefs-segmented button:focus-visible,
#settings .prefs-segmented button.is-active,
#settings .prefs-segmented button[aria-pressed="true"] {
  color: var(--text);
  background: rgba(91, 171, 213, 0.2);
  outline: none;
}
/* Likewise the underline on the chosen segment: inside a bordered group the
   selected cell is already the filled one, and a 2px bar hard against the
   group's bottom edge read as a rendering seam. */
#settings .prefs-reset {
  display: flex;
  justify-content: flex-start;
  padding-top: 16px;
}
#settings .settings-io-actions,
#settings .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 14px;
}
#settings .theme-swatches button {
  min-height: 72px;
}

/* About is a document, not a black editor pasted into a window. */
#experience .toolbar {
  min-height: 50px;
  padding: 0 14px;
  gap: 8px;
  background: rgba(28, 41, 57, 0.96);
}
#experience .about-source-toggle {
  margin-left: auto;
}
#experience .toolbar-icon.copy-md {
  width: auto;
  min-width: 54px;
  padding: 0 12px;
  font: 700 11px/1 var(--font-body);
}
#experience .editor {
  background: rgba(20, 32, 47, 0.96);
}
#experience.is-reading .editor {
  background: linear-gradient(90deg, rgba(27, 40, 56, 0.98), rgba(24, 36, 52, 0.98));
}
#experience.is-reading .notes.md-doc {
  width: min(100%, 76ch);
  margin: 0 auto;
  padding: 40px 42px 56px;
}
#experience:not(.is-reading) .notes {
  min-width: max-content;
  padding: 18px 24px 34px 0;
}
#experience:not(.is-reading) .editor {
  overflow: auto;
  scrollbar-gutter: stable;
}
#experience .statusbar,
#experience .locked-bubble,
#experience .readonly-caret {
  display: none !important;
}
#experience.locked-wiggle,
#experience.readonly-poke {
  animation: none !important;
  transform: none !important;
}

/* Shortcuts: grouped by intent with a stable description/key column. */
#shortcuts .shortcuts-body {
  height: calc(100% - 44px);
  padding: 28px 30px 34px;
  overflow: auto;
  background: transparent;
}
#shortcuts .shortcuts-intro h2 {
  margin: 6px 0;
  font: 700 28px/1.08 var(--font-display);
  letter-spacing: -0.02em;
}
#shortcuts .shortcuts-intro p {
  margin: 0 0 22px;
  color: var(--muted);
}
#shortcuts .shortcut-groups {
  display: grid;
  /* auto-fit, not `1fr 1fr`. A KyrOS window is resizable, so its layout has to
     answer to the WINDOW's width - a viewport media query still reads 1440px
     while the window itself has been dragged to 400, which is what kept two
     columns squeezed and broke "Command palette" and "Tile left / right"
     across three lines each. auto-fit needs no breakpoint and no container
     query: the track count follows the space that actually exists. ★ */
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px 22px;
}
#shortcuts .shortcut-group {
  padding-top: 12px;
  border-top: 1px solid var(--shell-line-strong);
}
#shortcuts .shortcut-group h3 {
  margin: 0 0 8px;
  color: color-mix(in srgb, var(--fw-warm, #e1c99a) 88%, white);
  font: 700 10px/1 var(--font-mono);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
#shortcuts .shortcut-group > div {
  min-height: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid rgba(170, 196, 218, 0.13);
}
#shortcuts .shortcut-group > div > span:last-child {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}
#shortcuts .kbd {
  min-width: 31px;
  height: 29px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-color: rgba(170, 196, 218, 0.3);
  border-bottom-color: rgba(170, 196, 218, 0.54);
  border-radius: 7px;
  background: rgba(38, 53, 71, 0.9);
  font: 700 11px/1 var(--font-mono);
}

/* Music is a listening instrument: track, seek, transport, queue. Advanced
   sound shaping is present but subordinate, and empty panel height is gone. */
#player .playerbody {
  grid-template-columns: minmax(0, 1.18fr) minmax(250px, 0.82fr);
  gap: 12px;
  padding: 12px;
}
#player .music-console,
#player .music-queue {
  border-radius: var(--shell-radius);
  background: rgba(21, 33, 47, 0.86);
  box-shadow: none;
}
#player .track {
  padding: 18px;
  gap: 12px;
}
#player .tracktop,
#player .music-head {
  grid-template-columns: 72px minmax(0, 1fr);
}
#player .viz {
  grid-column: 1 / -1;
  height: 42px;
  min-height: 42px;
}
#player .music-controls {
  margin: 2px 0;
}
#player .sound-shaping {
  margin-top: 2px;
  border-top: 1px solid var(--shell-line);
}
#player .sound-shaping summary {
  min-height: 42px;
  display: flex;
  align-items: center;
  color: var(--muted-2);
  cursor: pointer;
  font: 700 10px/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
#player .sound-shaping summary::marker {
  color: var(--kyr-accent-2);
}
#player .sound-shaping .eq-zone {
  padding-bottom: 4px;
}
#player #eqBars.ck-eq-panel {
  height: 78px;
  min-height: 78px;
  max-height: 78px;
  border-radius: 10px;
}
#player .playlist {
  padding: 16px 14px;
}
#player #playlist .song {
  min-height: 44px;
  padding: 8px 9px;
  border-bottom: 1px solid rgba(170, 196, 218, 0.12);
  border-radius: 7px;
}
#player .playlist-note {
  margin-top: auto;
}

/* The mini player is the full transport distilled-not a separate toy. */
.mini-player {
  width: min(390px, calc(100vw - 20px));
  min-height: 116px;
  border-radius: var(--shell-radius);
  background: rgba(21, 34, 49, 0.97);
  box-shadow: 0 18px 52px rgba(2, 8, 18, 0.55);
}
.mini-player .mini-head {
  padding-right: 28px;
}
.mini-player .mini-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.mini-player .mini-controls button {
  width: 34px;
  height: 34px;
  min-width: 34px;
}
.mini-player .mini-controls .mini-play {
  width: 40px;
  height: 40px;
}
.mini-player .mini-note {
  opacity: 0.72;
}

/* Case study keeps its proven reading order while the shell loses preview
   theatre and nested-card noise. */
#caseStudy .case-body {
  background: rgba(23, 34, 49, 0.98);
}
#caseStudy .case-read {
  max-width: 76ch;
  padding: 34px 38px 48px;
}
#caseStudy .case-meta {
  padding: 16px 0;
  border-top: 1px solid var(--shell-line);
  border-bottom: 1px solid var(--shell-line);
}
#caseStudy .case-sec {
  margin-top: 30px;
}
#caseStudy .case-foot button {
  min-height: 42px;
}

/* Secondary surfaces inherit the same ledger anatomy without becoming hero
   destinations. */
#concepts .concept-card,
#trash .scrap-card,
.concept-detail .detail-body,
.trash-detail .trash-detail-body,
.calcwin .calc,
.terminal .terminal-body,
.note-body,
.music-library-body {
  border-color: var(--shell-line);
  background: rgba(24, 37, 52, 0.9);
}
.concept-detail .detail-tags span,
.trash-detail .detail-tags span {
  border-radius: 999px;
}
.calcwin .keys button {
  min-height: 40px;
  border-radius: 8px;
}

@media (max-width: 860px) {
  #home.win,
  #experience.win,
  #player.win,
  #shortcuts.win,
  #settings.win,
  #aboutOS.win,
  #caseStudy.win {
    width: calc(100vw - 20px);
    max-width: none;
  }
  #home .layout {
    grid-template-columns: 1fr;
  }
  #home .side {
    display: none;
  }
  #home .tiles {
    grid-template-columns: minmax(230px, 1.2fr) 1fr 1fr;
  }
  #settings.win > .settings-body {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  #settings .settings-nav {
    min-height: 54px;
    padding: 7px 10px;
    flex-direction: row;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--shell-line);
    scrollbar-width: none;
  }
  #settings .settings-nav button {
    width: auto;
    min-width: max-content;
    min-height: 40px;
    justify-content: center;
  }
}

@media (max-width: 640px) {
  :root {
    --shell-control-h: 44px;
  }
  #home.win,
  #experience.win,
  #player.win,
  #shortcuts.win,
  #settings.win,
  #aboutOS.win,
  #caseStudy.win {
    width: 100vw !important;
    height: calc(100vh - var(--topbar-h, 40px)) !important;
    min-height: 0;
    border-radius: 0;
  }
  #home .main {
    padding: 26px 18px 40px;
  }
  #home .main > h1 {
    font-size: clamp(34px, 11vw, 44px);
    max-width: 12ch;
  }
  #home .main > p {
    font-size: 15px;
  }
  #home .tiles {
    grid-template-columns: 1fr 1fr;
    gap: 9px;
  }
  #home .tile-primary {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 176px;
  }
  #home .tile-support {
    min-height: 130px;
  }
  #home .tile-explore {
    min-height: 52px;
  }
  .work-grid {
    grid-template-columns: 1fr;
  }
  .work-card-featured {
    grid-column: auto;
    display: flex;
  }
  .work-card-featured .work-card-media {
    min-height: 0;
    aspect-ratio: 16 / 10;
    margin: 10px 10px 0;
    border: 1px solid var(--shell-line);
    border-radius: 9px;
  }
  .work-card:hover,
  .work-card:focus-visible {
    transform: none;
  }
  #settings .settings-nav {
    min-height: 60px;
    padding: 8px;
  }
  #settings .settings-nav button {
    min-height: 44px;
  }
  #settings .settings-main {
    padding: 22px 16px 34px;
  }
  #settings .settings-section > h2 {
    font-size: 26px;
  }
  #settings .prefs-row {
    grid-template-columns: 1fr;
    gap: 11px;
    padding: 16px 0;
  }
  #settings .prefs-segmented {
    width: 100%;
  }
  #settings .prefs-segmented button {
    flex: 1;
    min-height: 44px;
  }
  #experience .toolbar {
    min-height: 56px;
    padding: 0 10px;
  }
  #experience .about-title-reading,
  #experience .about-title-source {
    min-width: 0;
    max-width: 48vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #experience .about-source-toggle {
    min-width: 96px;
    padding-inline: 12px;
  }
  #experience .toolbar-icon.copy-md {
    min-width: 54px;
  }
  #experience.is-reading .notes.md-doc {
    padding: 28px 20px 44px;
  }
  #experience:not(.is-reading) .notes {
    padding-top: 14px;
  }
  #shortcuts .shortcuts-body {
    padding: 24px 18px 36px;
  }
  #shortcuts .shortcuts-intro h2 {
    font-size: 25px;
  }
  #shortcuts .shortcut-group > div {
    min-height: 52px;
  }
  #player .playerbody {
    grid-template-columns: 1fr;
    padding: 10px;
    overflow: auto;
  }
  #player .music-console,
  #player .music-queue {
    min-height: max-content;
  }
  #player .music-head {
    grid-template-columns: 68px minmax(0, 1fr) !important;
  }
  #player .viz {
    display: flex;
    height: 36px;
    min-height: 36px;
  }
  #player .playlist-note {
    margin-top: 16px;
  }
  .mini-player {
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    width: auto !important;
    min-height: 106px;
  }
  .mini-player .mini-controls button {
    width: 44px;
    height: 44px;
    min-width: 44px;
  }
  .mini-player .mini-controls .mini-play {
    width: 48px;
    height: 48px;
  }
  #caseStudy .case-read {
    padding: 24px 18px 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #home .tile,
  .work-card,
  #player .music-controls button,
  .mini-player {
    transition: none !important;
    transform: none !important;
  }
}
.work-card-more {
  margin-top: auto;
  padding-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 700 12.5px/1 var(--font-body);
  letter-spacing: 0.02em;
  color: var(--muted-2);
  transition: color var(--motion-focus);
}
.work-card-more .kyr-icon {
  transition: transform var(--motion-focus);
}
.work-card:hover .work-card-more,
.work-card:focus-visible .work-card-more {
  color: var(--card-accent, var(--cyan));
}
.work-card:hover .work-card-more .kyr-icon,
.work-card:focus-visible .work-card-more .kyr-icon {
  transform: translateX(3px);
}
/* Reading view */
.case-read {
  max-width: 76ch;
  margin: 0 auto;
  padding: 26px 30px 44px;
}
.case-head h2 {
  margin: 6px 0 10px;
  font: 600 28px/1.18 var(--font-display);
  color: var(--text);
}
.case-lede {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}
.case-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 34px;
  margin: 0 0 22px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.case-meta div {
  min-width: 140px;
}
.case-meta dt {
  font: 600 10px/1 var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 0 0 5px;
}
.case-meta dd {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.45;
}
.case-media {
  margin: 0 0 26px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #0a1430;
}
.case-media img {
  display: block;
  width: 100%;
  height: auto;
}
.case-media figcaption {
  padding: 9px 14px 11px;
  border-top: 1px solid var(--line);
  color: var(--muted-2);
  font-size: 12.5px;
  line-height: 1.5;
}
.case-sec {
  margin: 0 0 24px;
}
.case-sec h3 {
  margin: 0 0 8px;
  font: 600 11.5px/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-soft);
}
.case-sec p {
  margin: 0;
  color: #d9e3f0;
  font-size: 14.5px;
  line-height: 1.7;
}
.case-decisions {
  margin: 0;
  padding: 0;
  list-style: none;
}
.case-decisions li {
  position: relative;
  padding: 0 0 10px 20px;
  color: #d9e3f0;
  font-size: 14.5px;
  line-height: 1.65;
}
.case-decisions li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  opacity: 0.85;
}
.case-evidence {
  margin-bottom: 14px;
}
#caseStudy .case-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
@media (max-width: 640px) {
  .case-read {
    padding: 18px 16px 34px;
  }
  .case-head h2 {
    font-size: 23px;
  }
  .case-meta {
    gap: 12px 22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .work-card,
  .work-card:hover,
  .work-card:focus-visible {
    transition: none;
    transform: none;
  }
}

/* About reading and source views. */
#experience .about-title-reading {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  color: var(--text);
}
#experience:not(.is-reading) .about-title-reading {
  display: none;
}
#experience.is-reading .about-title-source {
  display: none;
}
#experience .about-source-toggle {
  font: 600 11px/1 var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
}
#experience .about-source-toggle:hover,
#experience .about-source-toggle:focus-visible {
  color: var(--text);
  border-color: rgba(114, 243, 255, 0.4);
  outline: none;
}
#experience.is-reading .statusbar,
#experience.is-reading .locked-bubble,
#experience.is-reading .readonly-caret {
  display: none;
}
#experience.is-reading .md-gutter,
#experience.is-reading .md-punct {
  display: none;
}
#experience.is-reading .editor {
  cursor: default;
}
#experience.is-reading .notes {
  max-width: 70ch;
  margin: 0 auto;
  padding: 26px 30px 42px;
}
#experience.is-reading .md-row {
  display: block;
  padding: 0;
  background: none;
  font: 400 14.5px/1.7 var(--font-body);
  color: #d9e3f0;
}
#experience.is-reading .md-row.is-active {
  background: none;
}
#experience.is-reading .md-line {
  white-space: normal;
  font: inherit;
}
#experience.is-reading .md-row.is-h1 {
  margin: 2px 0 12px;
}
#experience.is-reading .md-h1 {
  font: 600 26px/1.2 var(--font-display);
  color: var(--text);
}
#experience.is-reading .md-row.is-h2 {
  margin: 26px 0 8px;
}
#experience.is-reading .md-h2 {
  font: 600 11.5px/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-soft);
}
#experience.is-reading .md-strong {
  color: var(--text);
  font-weight: 600;
}
#experience.is-reading .md-em {
  color: var(--muted);
  font-style: normal;
  font-size: 12.5px;
}
#experience.is-reading .md-row.is-list {
  position: relative;
  padding: 1px 0 7px 20px;
}
#experience.is-reading .md-list-marker {
  position: absolute;
  left: 2px;
  color: var(--cyan);
  opacity: 0.85;
}
#experience.is-reading .md-code-span {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--cream-soft);
}
@media (max-width: 640px) {
  #experience.is-reading .notes {
    padding: 18px 16px 34px;
  }
  #experience.is-reading .md-h1 {
    font-size: 22px;
  }
}

/* Contact route. */
#contact .contact-shell {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 30px 28px 34px;
  overflow: auto;
}
#contact .contact-intro,
#contact .contact-route,
#contact .contact-links {
  width: 100%;
  max-width: 54ch;
  margin: 0 auto;
}
#contact .contact-heading {
  margin: 8px 0 6px;
  font: 600 24px/1.22 var(--font-display);
  color: var(--text);
}
#contact .contact-copy {
  margin: 0;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.6;
}
#contact .contact-route {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 22px;
  background: var(--panel);
}
#contact .contact-email-main {
  display: inline-block;
  font: 600 clamp(15px, 4.8vw, 19px) / 1.3 var(--font-mono);
  color: var(--cyan);
  text-decoration: none;
  /* One line at every width - a broken email address reads as a bug. */
  white-space: nowrap;
}
#contact .contact-email-main:hover,
#contact .contact-email-main:focus-visible {
  text-decoration: underline;
  outline: none;
}
#contact .contact-honest {
  margin: 8px 0 16px;
  color: var(--muted-2);
  font-size: 12.5px;
  line-height: 1.5;
}
#contact .contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
#contact .contact-write {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 10px;
  background: var(--cyan);
  color: #06131f;
  font: 600 13.5px/1 var(--font-body);
  text-decoration: none;
}
#contact .contact-write:hover,
#contact .contact-write:focus-visible {
  filter: brightness(1.08);
  outline: none;
}
#contact .contact-copy-btn {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: none;
  color: var(--text);
  font: 600 13.5px/1 var(--font-body);
  cursor: pointer;
}
#contact .contact-copy-btn:hover,
#contact .contact-copy-btn:focus-visible {
  border-color: rgba(114, 243, 255, 0.4);
  outline: none;
}
#contact .contact-links a {
  color: var(--muted);
  font-size: 13px;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
}
#contact .contact-links a:hover,
#contact .contact-links a:focus-visible {
  color: var(--text);
  border-color: rgba(114, 243, 255, 0.4);
  outline: none;
}
@media (max-width: 640px) {
  #contact .contact-shell {
    padding: 22px 16px 26px;
  }
  #contact .contact-write,
  #contact .contact-copy-btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* Daylight states. daylight.js owns the clock and body[data-daylight]. */
@property --dl-sky-0 {
  syntax: "<color>";
  inherits: true;
  initial-value: #3d86cf;
}
@property --dl-sky-1 {
  syntax: "<color>";
  inherits: true;
  initial-value: #1d4b7b;
}
@property --dl-sky-2 {
  syntax: "<color>";
  inherits: true;
  initial-value: #112e4d;
}
@property --dl-sky-3 {
  syntax: "<color>";
  inherits: true;
  initial-value: #071621;
}
body {
  --dl-sky-0: #3d86cf;
  --dl-sky-1: #1d4b7b;
  --dl-sky-2: #112e4d;
  --dl-sky-3: #071621;
  --dl-stars: 0.42;
  --dl-window: 0.85;
  --dl-window-dim: 0.45;
  transition:
    --dl-sky-0 6s ease,
    --dl-sky-1 6s ease,
    --dl-sky-2 6s ease,
    --dl-sky-3 6s ease;
}
body.dl-instant {
  transition: none !important;
}
body[data-daylight="dawn"] {
  --dl-sky-0: #d8a9bd;
  --dl-sky-1: #7f6f9e;
  --dl-sky-2: #35446f;
  --dl-sky-3: #0e1a30;
  --dl-stars: 0.12;
  --dl-window: 0.6;
  --dl-window-dim: 0.3;
}
body[data-daylight="day"] {
  --dl-sky-0: #9ecbe8;
  --dl-sky-1: #5b90bd;
  --dl-sky-2: #285384;
  --dl-sky-3: #0c1d31;
  --dl-stars: 0;
  --dl-window: 0;
  --dl-window-dim: 0;
}
body[data-daylight="dusk"] {
  --dl-sky-0: #b06d8d;
  --dl-sky-1: #684a76;
  --dl-sky-2: #243254;
  --dl-sky-3: #081426;
  --dl-stars: 0.18;
  --dl-window: 0.85;
  --dl-window-dim: 0.45;
}
@media (prefers-reduced-motion: reduce) {
  body {
    transition: none;
  }
}

/* Shared motion timings for entry, focus, panel changes, and dismissal. */
:root {
  --ease-transit: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-enter: 0.34s var(--ease-transit);
  --motion-focus: 0.16s cubic-bezier(0.4, 0, 0.2, 1);
  --motion-panel: 0.24s var(--ease-transit);
  --motion-dismiss: 0.2s cubic-bezier(0.55, 0, 0.6, 1);
}

/* ──[ · ]── FW-5.2 · keyboard / screen-reader audit (D3, D6, D7) ────────────
   Windows take programmatic focus on open (tabindex="-1", set in app.js) but
   must NEVER show a persistent outline from it - focus stays invisible on the
   surface; the raised window + active titlebar are the indicator. */
.win:focus {
  outline: none;
}
/* D7: the topbar clock/date spans are role="button" tab stops - same ring. */
.topbar .status span[role="button"]:focus-visible {
  outline: 2px solid var(--fw-accent);
  outline-offset: 3px;
}

/* ══════════════════════════════════════════════════════════════════════
   [ * ]  WORK REEL (makeover 1b) · the landing's scroll-down journey
   ──────────────────────────────────────────────────────────────────────
   Frame one is the greeting; the reel is "below the fold" of a desktop
   that does not scroll. It rises over the wallpaper (transform only), then
   behaves as native vertical scroll with proximity snap - each set fills
   the section, the snap suggests rather than locks. Left rail = meridian
   progress.
   ────────────────────────────────────────────────────────────────────── */
.work-reel {
  position: fixed;
  inset: 0;
  z-index: 15; /* above wallpaper + greeting (4), below windows (20) and dock */
  transform: translateY(102%);
  background:
    radial-gradient(120% 90% at 82% 0%, rgba(61, 134, 207, 0.14), transparent 55%),
    linear-gradient(180deg, rgba(6, 12, 22, 0.9) 0%, rgba(3, 6, 17, 0.96) 100%);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  color: var(--fw-paper, #eef5ff);
  visibility: hidden;
  /* ── EXIT ──
     This state is the destination when .is-open is removed, so its transition
     is the dismissal. Two things matter here:

     1. `visibility` MUST be a delayed step, not an untransitioned property.
        Left out of the transition list it flips to hidden on frame one, while
        transform is still translateY(0) - the panel is torn off the screen in
        a single frame (backdrop-filter layer and all) and the slide animates
        invisibly to nobody. That hard cut is what reads as a flash. Delaying
        the step by the full duration keeps the panel painted until it has
        actually cleared the viewport.
     2. The exit accelerates away (ease-in) instead of borrowing the entry's
        decelerating transit curve. A dismissal should leave; an entrance
        should arrive. ★ */
  transition:
    transform 0.42s cubic-bezier(0.45, 0, 0.75, 0.3),
    visibility 0s linear 0.42s;
}
.work-reel.is-open {
  transform: translateY(0);
  visibility: visible;
  /* ── ENTER ── the transit curve, and visibility applies on frame one. */
  transition:
    transform 0.48s cubic-bezier(0.2, 0.72, 0.22, 1),
    visibility 0s;
}
html[data-reduced-motion="on"] .work-reel {
  transition: none;
}

.work-reel-head {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 66px clamp(22px, 6vw, 84px) 18px;
  background: linear-gradient(180deg, rgba(3, 6, 17, 0.88), rgba(3, 6, 17, 0));
  pointer-events: none;
}
.work-reel-head > * {
  pointer-events: auto;
}
.work-reel-heading .reel-kicker {
  margin: 0 0 6px;
}
.work-reel-heading h2 {
  margin: 0;
  font: 700 clamp(19px, 2.6vw, 27px) / 1.15 var(--font-display, "Ubuntu", sans-serif);
  letter-spacing: -0.01em;
  color: var(--fw-paper, #eef5ff);
}
.work-reel-close {
  appearance: none;
  border: 1px solid rgba(200, 218, 238, 0.22);
  border-radius: 999px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: rgba(9, 17, 30, 0.5);
  color: var(--fw-paper-72, rgba(238, 245, 255, 0.72));
  cursor: pointer;
  transition:
    color var(--motion-focus),
    border-color var(--motion-focus),
    background var(--motion-focus),
    transform var(--motion-focus);
}
.work-reel-close:hover {
  color: var(--fw-paper, #eef5ff);
  border-color: rgba(125, 216, 247, 0.55);
  background: rgba(15, 26, 43, 0.7);
  transform: translateY(-1px);
}
.work-reel-close:focus-visible {
  outline: 2px solid var(--fw-accent, #62d0f7);
  outline-offset: 3px;
}

/* The scroll surface: native overflow + proximity snap = the "semi-snap". */
.work-reel-track {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
  cursor: grab;
}
.work-reel-track:active {
  cursor: grabbing;
}
/* The reel moves focus onto the track when it opens, so arrows and PageDown
   scroll straight away (FW-5.4). That programmatic focus was painting the
   browser's NATIVE ring: `outline: 1px auto`, which renders in the platform
   accent - a hard bright bar tracing the track's outer edge and sweeping the
   full width of the screen as the panel slides. Suppress the default, and give
   keyboard arrivals a branded ring set INSIDE the panel so it can never ride
   the moving edge. */
.work-reel-track:focus {
  outline: none;
}
.work-reel-track:focus-visible {
  outline: 2px solid var(--fw-accent, #62d0f7);
  outline-offset: -6px;
  border-radius: 10px;
}
/* FW-5.4 drag repair: while a mouse drag owns the scroll, snap stands down -
   proximity-snap re-adjusting every programmatic scrollTop write is what made
   drags feel stuck, and its instant re-engage on release was the rigid jolt.
   The JS settles with a smooth scroll, then re-arms snap after landing. */
.work-reel-track.is-dragging {
  scroll-snap-type: none;
  user-select: none;
}
.work-reel-set {
  min-height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  display: flex;
  align-items: center;
  padding: clamp(96px, 14vh, 140px) clamp(22px, 7vw, 96px) clamp(56px, 9vh, 96px) clamp(58px, 9vw, 128px); /* left room for the rail */
}

/* One project = one full-section panel: media left, story right. */
.reel-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 64px);
  align-items: center;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}
.reel-index {
  position: absolute;
  top: -0.72em;
  left: -0.35em;
  z-index: 0;
  font: 950 clamp(72px, 11vw, 150px) / 1 var(--font-display, "Ubuntu", sans-serif);
  letter-spacing: -0.04em;
  color: rgba(238, 245, 255, 0.055);
  pointer-events: none;
  user-select: none;
}
.reel-media {
  position: relative;
  z-index: 1;
  margin: 0;
  border-radius: 20px;
  border: 1px solid rgba(200, 218, 238, 0.16);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #0a1430;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.reel-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.reel-media figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* FW-5.4: a real seat for the caption - taller fade, deeper floor - so it
     never fights detail at the foot of the framed screenshot (the KyrOS shot
     has its own dock down there). */
  padding: 26px 14px 11px;
  font:
    700 9.5px/1.3 ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(238, 245, 255, 0.72);
  background: linear-gradient(180deg, transparent, rgba(3, 6, 17, 0.6) 45%, rgba(3, 6, 17, 0.88));
}
.reel-copy {
  position: relative;
  z-index: 1;
  max-width: 54ch;
}
.reel-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font:
    800 11px/1 ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(125, 216, 247, 0.78);
}
.reel-chip {
  font:
    800 9.5px/1 ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(238, 245, 255, 0.6);
  border: 1px solid rgba(200, 218, 238, 0.22);
  border-radius: 999px;
  padding: 3px 8px;
  white-space: nowrap;
}
.reel-chip-sample {
  color: rgba(125, 216, 247, 0.8);
  border-color: rgba(125, 216, 247, 0.35);
}
.reel-title {
  margin: 0 0 14px;
  font: 700 clamp(26px, 3.6vw, 44px) / 1.08 var(--font-display, "Ubuntu", sans-serif);
  letter-spacing: -0.015em;
  color: var(--fw-paper, #eef5ff);
}
.reel-problem {
  margin: 0 0 16px;
  color: rgba(238, 245, 255, 0.72);
  font-size: clamp(14px, 1.35vw, 16.5px);
  line-height: 1.6;
}
.reel-outcome {
  margin: 0 0 14px;
  padding-left: 12px;
  border-left: 2px solid var(--fw-accent, #62d0f7);
  color: var(--fw-paper, #eef5ff);
  font-size: clamp(13.5px, 1.2vw, 15px);
  line-height: 1.55;
}
.reel-role {
  margin: 0 0 22px;
  font:
    700 11px/1.5 ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  letter-spacing: 0.06em;
  color: rgba(238, 245, 255, 0.5);
}
/* CTA shares the greeting button's sky-glass primary language. */
.reel-cta {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 0;
  border-radius: 12px;
  padding: 13px 22px;
  font: 800 13px/1 var(--font-body, "Atkinson Hyperlegible", sans-serif);
  letter-spacing: 0.02em;
  color: #04222d;
  /* FW-5.4: same flat lit recipe as .greeting-btn-primary - one CTA voice. */
  background: #57c8ea;
  box-shadow: 0 6px 22px rgba(38, 160, 215, 0.3);
  cursor: pointer;
  transition:
    transform var(--motion-focus),
    background var(--motion-focus),
    box-shadow var(--motion-focus);
}
.reel-cta .kyr-icon {
  transition: transform var(--motion-focus);
}
.reel-cta:hover {
  background: #6fd6f2;
  box-shadow: 0 8px 26px rgba(56, 178, 232, 0.36);
}
.reel-cta:hover .kyr-icon {
  transform: translateX(3px);
}
.reel-cta:focus-visible {
  outline: 2px solid var(--fw-accent, #62d0f7);
  outline-offset: 3px;
}

/* "In production" set - the concepts bench. */
.reel-panel-concepts {
  grid-template-columns: 1fr;
  gap: 30px;
  align-items: start;
}
.reel-concepts-head {
  max-width: 62ch;
}
.reel-concept-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.reel-concept {
  border: 1px solid rgba(200, 218, 238, 0.14);
  border-radius: 16px;
  padding: 18px;
  background: rgba(9, 17, 30, 0.5);
  transition:
    transform var(--motion-focus),
    border-color var(--motion-focus),
    background var(--motion-focus);
}
.reel-concept:hover {
  transform: translateY(-3px);
  border-color: rgba(125, 216, 247, 0.4);
  background: rgba(15, 26, 43, 0.62);
}
.reel-concept b {
  display: block;
  margin: 10px 0 2px;
  font: 700 15.5px/1.25 var(--font-display, "Ubuntu", sans-serif);
  color: var(--fw-paper, #eef5ff);
}
.reel-concept small {
  display: block;
  color: rgba(125, 216, 247, 0.66);
  font-size: 12px;
  margin-bottom: 8px;
}
.reel-concept p {
  margin: 0;
  color: rgba(238, 245, 255, 0.62);
  font-size: 13px;
  line-height: 1.55;
}

/* Meridian rail: one hairline, one node per set, the active node lights. */
.work-reel-rail {
  position: absolute;
  left: clamp(18px, 3vw, 40px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
}
.work-reel-rail::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(125, 216, 247, 0.3) 18%,
    rgba(176, 200, 228, 0.16) 60%,
    transparent
  );
}
.reel-node {
  position: relative;
  appearance: none;
  border: 0;
  padding: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(238, 245, 255, 0.28);
  cursor: pointer;
  transition:
    background var(--motion-focus),
    box-shadow var(--motion-focus),
    transform var(--motion-focus);
}
.reel-node:hover {
  background: rgba(238, 245, 255, 0.6);
}
.reel-node.is-active {
  background: var(--fw-accent, #62d0f7);
  box-shadow: 0 0 0 5px rgba(125, 216, 247, 0.16);
  transform: scale(1.25);
}
.reel-node:focus-visible {
  outline: 2px solid var(--fw-accent, #62d0f7);
  outline-offset: 3px;
}

/* The greeting cue: a quiet scroll invitation floating above the dock. */
.work-reel-cue {
  position: absolute;
  left: 50%;
  bottom: 92px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(200, 218, 238, 0.2);
  border-radius: 999px;
  padding: 9px 16px;
  background: rgba(9, 17, 30, 0.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(238, 245, 255, 0.66);
  font:
    800 10.5px/1 ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  pointer-events: auto; /* .desktop-greeting is pointer-events: none */
  /* No bob, no entrance loop: FW-3.2 says the landing rests. The cue earns
     attention with hover/focus states, not motion. */
  /* The opacity delay is the RETURN leg only: when the reel is dismissed the
     cue would otherwise bloom back in immediately, underneath a panel still
     sliding down over it - two things moving at once for no reason. Waiting
     out the slide lets the greeting settle first, then the invitation
     returns. Hover/focus are unaffected: they change colour, not opacity. */
  transition:
    opacity var(--motion-focus) 0.34s,
    color var(--motion-focus),
    border-color var(--motion-focus),
    background var(--motion-focus);
}
/* The global `button:hover { transform: translateY(-1px) }` rule (0,1,1)
   would otherwise strip the translateX(-50%) centering and fling the cue
   half its width to the left on hover - pin it with higher specificity. */
.work-reel-cue:hover,
.work-reel-cue:focus-visible,
.work-reel-cue:active {
  transform: translateX(-50%);
}
.work-reel-cue:hover {
  color: var(--fw-paper, #eef5ff);
  border-color: rgba(125, 216, 247, 0.5);
  background: rgba(15, 26, 43, 0.6);
}
.work-reel-cue:focus-visible {
  outline: 2px solid var(--fw-accent, #62d0f7);
  outline-offset: 3px;
}
body.work-reel-open .work-reel-cue,
.work-reel-cue.is-hidden,
.work-reel-cue.is-dimmed {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-focus); /* hiding is immediate - only the return waits */
}

@media (max-width: 900px) {
  .work-reel-set {
    padding-left: clamp(20px, 5vw, 40px);
    padding-bottom: 132px; /* clear the dock - it floats above the reel */
    align-items: flex-start;
  }
  .work-reel-rail {
    display: none;
  }
  .reel-panel {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .reel-media {
    aspect-ratio: 16 / 9;
  }
  .work-reel-cue {
    bottom: 76px;
  }
}
/* Launchbat mobile is taller (icon + label): keep the cue clear of it. */
@media (pointer: coarse), (max-width: 640px) {
  .work-reel-cue {
    bottom: 104px;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   [ * ]  MERIDIAN PLAYER (makeover 7) · music player in the shell's language
   ──────────────────────────────────────────────────────────────────────
   One accent (sky), frosted glass, hairline sliders, a single lit
   transport. Appended LAST so it settles the layered overrides above
   without editing them.
   ────────────────────────────────────────────────────────────────────── */
#player .playerbody {
  /* min() floors - see #home .tiles. Bare minmax floors gave this a hard
     544px minimum, so the playlist spilled out of the window below that. */
  grid-template-columns: minmax(min(300px, 100%), 1.12fr) minmax(min(228px, 100%), 0.88fr);
  gap: 14px;
  padding: 14px;
}
#player .music-console,
#player .music-queue {
  border-radius: 20px;
  border: 1px solid rgba(200, 218, 238, 0.13);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)), rgba(8, 14, 24, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
#player .track {
  border-right: 0;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#player .tracktop,
#player .music-head {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}
#player .cover {
  width: 74px;
  height: 74px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 30% 24%, rgba(125, 216, 247, 0.5), transparent 42%),
    linear-gradient(145deg, #1c9bd6, #0d3a5c 70%, #071c2e);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 12px 30px rgba(0, 0, 0, 0.4);
}
#player .cover::after {
  inset: 19px;
  border: 8px solid rgba(3, 10, 18, 0.5);
  background: radial-gradient(circle, rgba(238, 245, 255, 0.9) 0 14%, transparent 15%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    0 0 0 1px rgba(3, 10, 18, 0.3);
}
#player .track-copy {
  min-width: 0;
}
#player .songtitle {
  font: 700 18px/1.2 var(--font-display);
  letter-spacing: -0.005em;
  color: var(--text);
}
#player #trackMeta {
  margin-top: 3px;
  font: 700 11px/1.4 var(--font-mono);
  letter-spacing: 0.03em;
  color: var(--muted-2);
}
#player .synth-badge {
  margin-top: 8px;
  padding: 3px 10px;
  font: 800 9.5px/1.5 var(--font-mono);
  letter-spacing: 0.12em;
  color: rgba(125, 216, 247, 0.85);
  border: 1px solid rgba(125, 216, 247, 0.32);
  background: rgba(125, 216, 247, 0.07);
}
/* Visualizer: free-standing bars, no box. */
#player .viz {
  height: 52px;
  min-height: 52px;
  padding: 0 2px;
  border: 0;
  background: none;
  gap: 4px;
}
#player .viz span {
  width: 5px;
  min-width: 5px;
  border-radius: 999px;
  background: linear-gradient(180deg, #62d0f7, #1c9bd6);
  box-shadow: 0 0 10px rgba(98, 208, 247, 0.3);
  opacity: 0.85;
}
/* Hairline sliders with a cyan node - the boot progress bar, as a control. */
#player input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 18px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  accent-color: #62d0f7;
}
#player input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
}
#player input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  margin-top: -4.5px;
  border: 0;
  border-radius: 50%;
  background: #62d0f7;
  box-shadow: 0 0 10px rgba(98, 208, 247, 0.65);
  transition: transform var(--motion-focus);
}
#player input[type="range"]:hover::-webkit-slider-thumb,
#player input[type="range"]:focus-visible::-webkit-slider-thumb {
  transform: scale(1.25);
}
#player input[type="range"]::-moz-range-track {
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
}
#player input[type="range"]::-moz-range-progress {
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #1c9bd6, #62d0f7);
}
#player input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 0;
  border-radius: 50%;
  background: #62d0f7;
  box-shadow: 0 0 10px rgba(98, 208, 247, 0.65);
}
#player .music-progress {
  margin: 2px 0 0;
}
#player .music-time {
  margin-top: 2px;
  font: 700 10.5px/1 var(--font-mono);
  letter-spacing: 0.05em;
  color: var(--muted-2);
}
/* Transport: ghost circles around one lit play button. */
#player .music-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 4px 0;
}
#player .music-controls button {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  border: 1px solid rgba(200, 218, 238, 0.18);
  background: rgba(255, 255, 255, 0.045);
  color: var(--text);
  display: grid;
  place-items: center;
  padding: 0;
  box-shadow: none;
  transition:
    transform var(--motion-focus),
    border-color var(--motion-focus),
    background var(--motion-focus),
    box-shadow var(--motion-focus),
    color var(--motion-focus);
}
#player .music-controls button:hover {
  transform: translateY(-1px);
  border-color: rgba(125, 216, 247, 0.5);
  background: rgba(125, 216, 247, 0.1);
  box-shadow: none;
}
#player .music-controls .play {
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(125, 216, 247, 0.98), rgba(46, 163, 217, 0.98));
  color: #032430;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 10px 26px rgba(28, 155, 214, 0.4);
}
#player .music-controls .play:hover {
  background: linear-gradient(180deg, #8fe0fa, #38a9dd);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 14px 34px rgba(56, 178, 232, 0.5);
  transform: translateY(-2px);
}
#player .music-controls .play .kyr-icon {
  width: 22px;
  height: 22px;
}
/* Volume: one quiet row. */
#player .music-volume {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 20px;
  gap: 10px;
  align-items: center;
  margin: 0;
  padding: 0;
  color: var(--muted-2);
}
#player .eq-zone .zone-label {
  font: 800 9.5px/1 var(--font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 8px;
}
#player #eqBars.ck-eq-panel {
  height: 82px;
  min-height: 82px;
  max-height: 82px;
  border-radius: 14px;
  border: 1px solid rgba(200, 218, 238, 0.1);
  background: rgba(4, 9, 17, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
#player #eqBars.ck-eq-panel .ck-eq-fill {
  background: linear-gradient(180deg, #62d0f7, #1c9bd6);
  box-shadow: 0 0 10px rgba(98, 208, 247, 0.35);
}
/* Queue */
#player .playlist {
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
}
#player .playlist h4 {
  margin: 2px 4px 10px;
  font: 800 10px/1 var(--font-mono);
  letter-spacing: 0.18em;
  color: var(--muted-2);
}
#player #playlist {
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow-y: auto;
  min-height: 0;
}
#player #playlist .song {
  grid-template-columns: 20px minmax(0, 1.3fr) minmax(0, 0.9fr);
  gap: 10px;
  padding: 9px 10px;
  border-radius: 11px;
  border: 1px solid transparent;
  font-size: 12.5px;
  color: var(--muted);
  transition:
    background var(--motion-focus),
    border-color var(--motion-focus),
    color var(--motion-focus);
}
#player #playlist .song span:first-child {
  font: 700 10.5px/1 var(--font-mono);
  color: var(--muted-2);
}
#player #playlist .song:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}
#player #playlist .song.active {
  border-color: rgba(125, 216, 247, 0.28);
  background: rgba(125, 216, 247, 0.09);
  box-shadow: none;
  color: var(--text);
}
#player #playlist .song.active span:first-child {
  color: #62d0f7;
}
#player .playlist-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 4px 0;
}
#player .playlist-actions button {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  padding: 0;
}
#player .playlist-actions button[aria-pressed="true"] {
  border-color: rgba(125, 216, 247, 0.5);
  background: rgba(125, 216, 247, 0.12);
  color: #62d0f7;
}
#player .playlist-actions #trackCount {
  margin-left: auto;
  font: 700 11px/1 var(--font-mono);
  letter-spacing: 0.04em;
}
#player .playlist-note {
  margin: auto 4px 0;
  padding-top: 12px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted-2);
  opacity: 1;
}
@media (max-width: 700px) {
  #player .playerbody {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   [ * ]  MINI PLAYER · perch + flight (makeover 6b/7)
   ──────────────────────────────────────────────────────────────────────
   Minimising flies the player window to its own perch bottom-right: one
   smooth arc, no wobble - the destination is visible the whole way. The
   mini player itself is restyled to the Meridian language.
   ────────────────────────────────────────────────────────────────────── */
.win.minimizing.to-mini {
  animation: miniFlight 0.36s cubic-bezier(0.5, 0.04, 0.24, 1) forwards;
}
@keyframes miniFlight {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
    filter: blur(0);
  }
  55% {
    opacity: 0.85;
  }
  100% {
    transform: translate(var(--min-x, 0), var(--min-y, 120px)) scale(0.1, 0.06);
    opacity: 0;
    filter: blur(3px);
  }
}
html[data-reduced-motion="on"] .win.minimizing.to-mini {
  animation-duration: 0.01s;
}
/* The perch arrives from where the window landed: rise + settle, no spin. */
.mini-player.showing {
  animation: miniIn 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes miniIn {
  0% {
    opacity: 0;
    transform: translateY(22px) scale(0.82);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.mini-player {
  border: 1px solid rgba(200, 218, 238, 0.16);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)), rgba(8, 14, 24, 0.82);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 24px 60px rgba(0, 0, 0, 0.5);
}
.mini-player .mini-cover {
  border-radius: 12px;
  background:
    radial-gradient(circle at 30% 24%, rgba(125, 216, 247, 0.5), transparent 42%),
    linear-gradient(145deg, #1c9bd6, #0d3a5c 70%, #071c2e);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 8px 20px rgba(0, 0, 0, 0.4);
}
.mini-player .mini-cover::after {
  border-color: rgba(3, 10, 18, 0.5);
  background: radial-gradient(circle, rgba(238, 245, 255, 0.9) 0 14%, transparent 15%);
}
.mini-player .mini-kicker {
  color: rgba(125, 216, 247, 0.75);
  font: 800 9px/1 var(--font-mono);
  letter-spacing: 0.16em;
}
.mini-player .mini-title {
  color: var(--text);
  font-weight: 700;
}
.mini-player .mini-sub {
  color: var(--muted-2);
}
#miniPlayer input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 14px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  accent-color: #62d0f7;
}
#miniPlayer input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
}
#miniPlayer input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 10px;
  margin-top: -3.5px;
  border: 0;
  border-radius: 50%;
  background: #62d0f7;
  box-shadow: 0 0 8px rgba(98, 208, 247, 0.6);
}
#miniPlayer input[type="range"]::-moz-range-track {
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
}
#miniPlayer input[type="range"]::-moz-range-progress {
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #1c9bd6, #62d0f7);
}
#miniPlayer input[type="range"]::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border: 0;
  border-radius: 50%;
  background: #62d0f7;
}
.mini-player .mini-controls button {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 50%;
  border: 1px solid rgba(200, 218, 238, 0.16);
  background: rgba(255, 255, 255, 0.045);
  color: var(--text);
  display: grid;
  place-items: center;
  padding: 0;
}
.mini-player .mini-controls button:hover {
  border-color: rgba(125, 216, 247, 0.5);
  background: rgba(125, 216, 247, 0.1);
}
.mini-player .mini-controls .mini-play {
  border: 0;
  background: linear-gradient(180deg, rgba(125, 216, 247, 0.98), rgba(46, 163, 217, 0.98));
  color: #032430;
  box-shadow: 0 6px 16px rgba(28, 155, 214, 0.38);
}
.mini-player .mini-note {
  color: var(--muted-2);
  font-size: 10.5px;
}
.mini-player .mini-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted-2);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.mini-player .mini-close:hover {
  color: #fff;
  background: rgba(237, 51, 59, 0.85);
}

/* ══════════════════════════════════════════════════════════════════════
   [ * ]  ABOUT.MD TOOLBAR (makeover 10a) · one calm chrome row
   ──────────────────────────────────────────────────────────────────────
   Document identity left, two quiet actions right. Same pill language as
   the shell.
   ────────────────────────────────────────────────────────────────────── */
#experience .toolbar {
  height: 46px;
  gap: 8px;
  padding: 0 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  border-bottom: 1px solid rgba(200, 218, 238, 0.11);
  color: var(--muted);
}
#experience .about-title-reading {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 700 13px/1 var(--font-display);
  letter-spacing: -0.005em;
  color: var(--text);
}
#experience .about-title-reading .sample-chip {
  margin-left: 0;
}
#experience .about-title-source {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 700 12px/1 var(--font-mono);
  letter-spacing: 0.05em;
  color: var(--muted);
}
#experience .about-title-source::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(125, 216, 247, 0.7);
  box-shadow: 0 0 8px rgba(98, 208, 247, 0.5);
}
#experience .about-source-toggle {
  appearance: none;
  font: 700 11.5px/1 var(--font-body);
  letter-spacing: 0.03em;
  text-transform: none;
  color: var(--muted);
  border: 1px solid rgba(200, 218, 238, 0.2);
  border-radius: 999px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition:
    color var(--motion-focus),
    border-color var(--motion-focus),
    background var(--motion-focus),
    transform var(--motion-focus);
}
#experience .about-source-toggle:hover,
#experience .about-source-toggle:focus-visible {
  color: var(--text);
  border-color: rgba(125, 216, 247, 0.5);
  background: rgba(125, 216, 247, 0.08);
  outline: none;
}
#experience .toolbar-icon.copy-md {
  appearance: none;
  width: 30px;
  height: 30px;
  min-width: 30px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(200, 218, 238, 0.18);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  cursor: pointer;
  transition:
    color var(--motion-focus),
    border-color var(--motion-focus),
    background var(--motion-focus),
    transform var(--motion-focus);
}
#experience .toolbar-icon.copy-md:hover,
#experience .toolbar-icon.copy-md:focus-visible {
  color: var(--text);
  border-color: rgba(125, 216, 247, 0.5);
  background: rgba(125, 216, 247, 0.08);
  transform: none;
  outline: none;
}
#experience .toolbar-icon.copy-md.copied {
  color: #8ff0a4;
  border-color: rgba(143, 240, 164, 0.45);
  background: rgba(143, 240, 164, 0.08);
}

/* ══════════════════════════════════════════════════════════════════════
   [ * ]  COMMAND PALETTE (makeover 10b) · a calm spotlight
   ──────────────────────────────────────────────────────────────────────
   One input, quiet group labels, plinth icons, an accent answer on the
   active row. No borders shouting around every row.
   ────────────────────────────────────────────────────────────────────── */
#command.command-palette {
  border-radius: 22px;
}
#command .command-body {
  padding: 14px;
}
#command .command-input {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px 14px 42px;
  margin-bottom: 12px;
  font: 500 15.5px/1.2 var(--font-body);
  color: var(--text);
  caret-color: #62d0f7;
  border: 1px solid rgba(200, 218, 238, 0.16);
  border-radius: 13px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239caabd' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='10.8' cy='10.8' r='5.9'/%3E%3Cline x1='15.2' y1='15.2' x2='19.3' y2='19.3'/%3E%3C/svg%3E")
      no-repeat 14px 50%,
    rgba(4, 9, 17, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition:
    border-color var(--motion-focus),
    box-shadow var(--motion-focus);
}
#command .command-input::placeholder {
  color: var(--muted-2);
}
#command .command-input:focus {
  outline: none;
  border-color: rgba(125, 216, 247, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 0 3px rgba(98, 208, 247, 0.14);
}
#command .command-list {
  display: grid;
  gap: 2px;
  max-height: 400px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}
#command .spotlight-group {
  display: grid;
  gap: 2px;
}
#command .spotlight-group + .spotlight-group {
  margin-top: 10px;
}
#command .spotlight-label {
  margin: 2px 12px 6px;
  font: 800 10px/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
}
#command .command-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  background: transparent;
  transition:
    background var(--motion-focus),
    border-color var(--motion-focus);
}
#command .command-item.active,
#command .command-item:hover {
  border-color: rgba(125, 216, 247, 0.22);
  background: rgba(125, 216, 247, 0.09);
}
#command .spot-icon {
  flex: none;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  border: 1px solid rgba(200, 218, 238, 0.14);
  background: rgba(255, 255, 255, 0.045);
  color: rgba(238, 245, 255, 0.75);
  font-size: 14px;
}
#command .command-item.active .spot-icon,
#command .command-item:hover .spot-icon {
  border-color: rgba(125, 216, 247, 0.35);
  color: #7dd8f7;
}
#command .spot-title {
  color: var(--text);
  font: 600 14px/1.25 var(--font-body);
}
#command .spot-sub {
  color: var(--muted-2);
  font-size: 12px;
}
#command .spot-meta .kbd {
  padding: 4px 7px;
  border-radius: 6px;
  border: 1px solid rgba(200, 218, 238, 0.16);
  background: rgba(4, 9, 17, 0.4);
  color: var(--muted);
  font: 700 10px/1 var(--font-mono);
  letter-spacing: 0.04em;
}
#command .command-empty {
  padding: 26px 12px;
  text-align: center;
  color: var(--muted-2);
  font-size: 13px;
}

/* Show the document title in reading mode and the filename in source mode. */
#experience.is-reading span.about-title-source {
  display: none;
}
#experience:not(.is-reading) span.about-title-reading {
  display: none;
}
#experience:not(.is-reading) span.about-title-source {
  display: inline-flex;
}

/* Shared surfaces for case studies, Settings, About KyrOS, and Home. */

/* ──[ · ]── case-study footer actions ───────────────────────────────────── */
#caseStudy .case-foot {
  gap: 12px;
}
#caseStudy .case-foot button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 11px 18px;
  font: 700 12.5px/1 var(--font-body);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition:
    transform var(--motion-focus),
    border-color var(--motion-focus),
    background var(--motion-focus),
    box-shadow var(--motion-focus);
}
#caseStudy .case-foot button:first-child {
  border: 0;
  color: #032430;
  background: linear-gradient(180deg, rgba(125, 216, 247, 0.96), rgba(46, 163, 217, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 8px 24px rgba(28, 155, 214, 0.3);
}
#caseStudy .case-foot button:first-child:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 14px 34px rgba(56, 178, 232, 0.42);
}
#caseStudy .case-foot button:not(:first-child) {
  border: 1px solid rgba(200, 218, 238, 0.22);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.045);
}
#caseStudy .case-foot button:not(:first-child):hover {
  transform: translateY(-2px);
  color: var(--text);
  border-color: rgba(125, 216, 247, 0.5);
  background: rgba(125, 216, 247, 0.08);
}
#caseStudy .case-foot button:focus-visible {
  outline: 2px solid var(--fw-accent, #62d0f7);
  outline-offset: 3px;
}

/* ──[ · ]── settings ────────────────────────────────────────────────────── */
#settings .settings-panel {
  border: 1px solid rgba(200, 218, 238, 0.12);
  border-radius: 16px;
  padding: 16px 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
#settings .settings-panel h3 {
  margin: 0 0 4px;
  font: 700 13.5px/1.25 var(--font-display);
  letter-spacing: -0.005em;
  color: var(--text);
}
#settings .settings-panel p.muted {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
}
#settings .theme-swatches {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
#settings .theme-swatches button {
  min-width: 64px;
  padding: 10px 10px 9px;
  border-radius: 12px;
  border: 1px solid rgba(200, 218, 238, 0.16);
  background: rgba(255, 255, 255, 0.035);
  box-shadow: none;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font: 700 11px/1 var(--font-body);
  letter-spacing: 0.03em;
  transition:
    transform var(--motion-focus),
    border-color var(--motion-focus),
    background var(--motion-focus),
    color var(--motion-focus),
    box-shadow var(--motion-focus);
}
#settings .theme-swatches button:hover {
  transform: translateY(-2px);
  border-color: rgba(125, 216, 247, 0.45);
  background: rgba(125, 216, 247, 0.07);
  color: var(--text);
}
#settings .theme-swatches button[aria-pressed="true"] {
  border-color: rgba(125, 216, 247, 0.7);
  background: rgba(125, 216, 247, 0.1);
  color: var(--text);
  box-shadow: 0 0 0 3px rgba(98, 208, 247, 0.16);
  outline: none;
}
#settings .theme-swatches .swatch-preview {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--swatch-c1), var(--swatch-c2));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 4px 12px rgba(0, 0, 0, 0.35);
}
#settings .theme-swatches .swatch-label {
  text-shadow: none;
  font-weight: 700;
}
#settings .settings-io-btn {
  border-radius: 999px;
  padding: 9px 15px;
  font: 700 12px/1 var(--font-body);
  color: var(--muted);
  border: 1px solid rgba(200, 218, 238, 0.2);
  background: rgba(255, 255, 255, 0.04);
  transition:
    color var(--motion-focus),
    border-color var(--motion-focus),
    background var(--motion-focus),
    transform var(--motion-focus);
}
#settings .settings-io-btn:hover {
  color: var(--text);
  border-color: rgba(125, 216, 247, 0.5);
  background: rgba(125, 216, 247, 0.08);
}

/* ──[ · ]── about OS ────────────────────────────────────────────────────── */
#aboutOS .about-hero-polished {
  border: 1px solid rgba(200, 218, 238, 0.13);
  border-radius: 18px;
  background:
    radial-gradient(120% 140% at 88% -20%, rgba(61, 134, 207, 0.18), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
#aboutOS .profile-mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 14px;
  border: 1px solid rgba(125, 216, 247, 0.3);
  background: rgba(125, 216, 247, 0.08);
  color: #dfe8f2;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 8px 22px rgba(0, 0, 0, 0.3);
}
#aboutOS .about-card-grid article {
  border: 1px solid rgba(200, 218, 238, 0.12);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  position: relative;
  overflow: hidden;
}
#aboutOS .about-card-grid article::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(125, 216, 247, 0.6), transparent);
}
#aboutOS .polished-skills span {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(200, 218, 238, 0.16);
  border-radius: 999px;
  padding: 6px 11px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--muted);
  font: 700 11px/1 var(--font-mono);
  letter-spacing: 0.03em;
  transition:
    color var(--motion-focus),
    border-color var(--motion-focus),
    background var(--motion-focus);
}
#aboutOS .polished-skills span:hover {
  color: var(--text);
  border-color: rgba(125, 216, 247, 0.4);
  background: rgba(125, 216, 247, 0.07);
}
#aboutOS .about-two-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
}
#aboutOS .about-two-col li {
  position: relative;
  padding-left: 16px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
#aboutOS .about-two-col li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #62d0f7;
  opacity: 0.85;
}
#aboutOS .about-actions-polished {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
#aboutOS .about-actions-polished button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 11px 18px;
  font: 700 12.5px/1 var(--font-body);
  letter-spacing: 0.02em;
  cursor: pointer;
  border: 1px solid rgba(200, 218, 238, 0.22);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.045);
  transition:
    transform var(--motion-focus),
    border-color var(--motion-focus),
    background var(--motion-focus),
    color var(--motion-focus),
    box-shadow var(--motion-focus);
}
#aboutOS .about-actions-polished button:first-child {
  border: 0;
  color: #032430;
  background: linear-gradient(180deg, rgba(125, 216, 247, 0.96), rgba(46, 163, 217, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 8px 24px rgba(28, 155, 214, 0.3);
}
#aboutOS .about-actions-polished button:hover {
  transform: translateY(-2px);
  color: var(--text);
  border-color: rgba(125, 216, 247, 0.5);
  background: rgba(125, 216, 247, 0.08);
}
#aboutOS .about-actions-polished button:first-child:hover {
  color: #032430;
  background: linear-gradient(180deg, #8fe0fa, #38a9dd);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 14px 34px rgba(56, 178, 232, 0.42);
}
#aboutOS .about-actions-polished button:focus-visible {
  outline: 2px solid var(--fw-accent, #62d0f7);
  outline-offset: 3px;
}

/* ──[ · ]── home tiles ──────────────────────────────────────────────────── */
#home .tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-top: 20px;
}
#home .tile {
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(200, 218, 238, 0.13);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  cursor: pointer;
  text-align: left;
  transition:
    transform var(--motion-panel),
    border-color var(--motion-focus),
    box-shadow var(--motion-panel),
    background var(--motion-focus);
}
#home .tile:hover,
#home .tile:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(125, 216, 247, 0.4);
  box-shadow:
    inset 0 0 0 1px rgba(125, 216, 247, 0.25),
    0 14px 36px rgba(0, 0, 0, 0.4);
  outline: none;
}
#home .tile .folder,
#home .tile .mail,
#home .tile .doc {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  border: 1px solid rgba(125, 216, 247, 0.24);
  background: rgba(125, 216, 247, 0.07);
  color: rgba(169, 224, 246, 0.9);
}
#home .tile .folder .kyr-icon,
#home .tile .mail .kyr-icon,
#home .tile .doc .kyr-icon {
  width: 22px;
  height: 22px;
}
#home .tile b {
  font: 700 13.5px/1.25 var(--font-display);
  letter-spacing: -0.005em;
  color: var(--text);
}
#home .tile small {
  display: block;
  margin-top: 3px;
  font: 500 11.5px/1.35 var(--font-body);
  color: var(--muted-2);
}

/* Responsive layout refinements. */
#home .tiles {
  grid-template-columns: minmax(250px, 1.25fr) repeat(2, minmax(150px, 0.75fr));
  gap: 12px;
  margin-top: 24px;
}
#home .tile-primary {
  grid-row: span 2;
  min-height: 266px;
  justify-content: space-between;
}
#home .tile-support {
  min-height: 128px;
}
#home .tile-explore {
  min-height: 52px;
  flex-direction: row;
  align-items: center;
  padding: 10px 14px;
}
#home .tile-explore .folder {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
}
#home .tile-explore .kyr-icon {
  width: 18px;
  height: 18px;
}

.work-grid {
  padding: 2px 2px 24px;
}
.work-card-featured .work-card-media {
  min-height: 224px;
  max-height: 300px;
}
.work-card-featured .work-card-body {
  gap: 7px;
  padding: 14px 18px 15px;
}
.work-card-featured .work-card-problem {
  -webkit-line-clamp: 2;
}
.work-card-more {
  min-height: 34px;
  color: color-mix(in srgb, var(--card-accent, var(--cyan)) 76%, var(--text));
  opacity: 0.92;
}

/* Keep card geometry stable so focus and hover cannot meet the window clip. */
.work-card:hover,
.work-card:focus-visible {
  transform: none;
}

#experience .toolbar-icon.copy-md {
  width: auto;
  min-width: 58px;
  height: 36px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  font: 700 11px/1 var(--font-body);
}

#player .audio-error {
  min-height: 18px;
  margin: 4px 0 0;
  color: var(--muted-2);
  font: 600 10.5px/1.35 var(--font-body);
}
#player .audio-error:empty {
  display: none;
}

@media (max-width: 860px) {
  #home .tiles {
    grid-template-columns: minmax(230px, 1.2fr) 1fr 1fr;
  }
}

@media (max-width: 640px) {
  #home.win,
  #experience.win,
  #player.win,
  #shortcuts.win,
  #settings.win,
  #aboutOS.win,
  #caseStudy.win {
    top: 50px !important;
    bottom: 82px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
  }
  #home .tiles {
    grid-template-columns: 1fr 1fr;
    gap: 9px;
  }
  #home .tile-primary {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 176px;
  }
  #home .tile-support {
    min-height: 130px;
  }
  .work-card-featured .work-card-media {
    min-height: 0;
    max-height: none;
  }
  #experience .toolbar-icon.copy-md {
    min-width: 54px;
    height: 36px;
    padding-inline: 10px;
  }
  #player .playerbody {
    grid-auto-rows: max-content;
  }
  #player .track.music-console {
    height: auto !important;
    min-height: 430px !important;
    overflow: hidden;
  }
  body.calm-effects #settings.win,
  body.mobile-shell #settings.win {
    top: 50px !important;
    bottom: 82px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
  }
  body.mobile-shell .win > .layout,
  body.mobile-shell .win > .playerbody,
  body.mobile-shell .win > .settings-body,
  body.mobile-shell .win > .shortcuts-body,
  body.mobile-shell .win > .contact-shell {
    height: calc(100% - 48px) !important;
    max-height: calc(100% - 48px) !important;
  }
}

@container developer-files (max-width: 430px) {
  #home .tiles {
    grid-template-columns: 1fr 1fr !important;
    gap: 9px !important;
  }
  #home .tile-primary {
    grid-column: 1 / -1;
    min-height: 176px !important;
    padding: 14px !important;
  }
  #home .tile-support {
    min-height: 130px !important;
    padding: 12px !important;
  }
  #home .tile-explore {
    min-height: 56px !important;
    padding: 8px 12px !important;
  }
}

/* Consistent hitboxes for title-bar controls. */
.win > .bar .win-controls {
  align-self: stretch;
  height: auto;
  gap: 2px;
  padding: 0 6px 0 0;
  align-items: center;
}
.win > .bar .win-controls button {
  width: 32px;
  min-width: 32px;
  max-width: 32px;
  height: 30px;
  min-height: 30px;
  max-height: 30px;
  margin: 0;
  padding: 0;
  flex: 0 0 32px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  line-height: 0;
  transform: none;
}
.win > .bar .win-controls button:hover,
.win > .bar .win-controls button:focus-visible,
.win > .bar .win-controls button:active {
  transform: none;
}
.win > .bar .win-controls .win-ctl-close:hover,
.win > .bar .win-controls .win-ctl-close:focus-visible {
  color: #fff;
  background: linear-gradient(180deg, #f0565f, #d42b35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 3px 12px rgba(237, 51, 59, 0.34);
}

/* Keep the About title visually continuous with the toolbar. */
#experience > .toolbar {
  min-height: 48px;
  padding-inline: 16px;
  background: linear-gradient(180deg, rgba(38, 53, 72, 0.94), rgba(29, 43, 60, 0.94));
  border-bottom-color: rgba(170, 196, 218, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 8px 24px rgba(2, 8, 18, 0.12);
}
#experience > .toolbar > span.about-title-reading,
#experience > .toolbar > span.about-title-source {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
}

/* Launchbat ruling (18 Jul 2026, Fable): the precision-repair pass had
   replaced the FW-1.6 meridian wave with a static per-icon hover pop
   (transform: none at rest + translateY/scale on :hover) - that erased the
   dock's signature and left a generic floating nav. The transit-lens wave in
   the canonical block above is restored as the ONE dock motion owner; only
   the reduced-motion + coarse-pointer kill switches below remain. */
@media (prefers-reduced-motion: reduce) {
  #dock button,
  #dock button:hover,
  #dock button:focus-visible,
  #dock.dock-shelf-v7 button,
  #dock.dock-shelf-v7 button:hover,
  #dock.dock-shelf-v7 button:focus-visible,
  body.calm-effects #dock.dock-shelf-v7 button,
  body.calm-effects #dock.dock-shelf-v7 button:hover,
  body.calm-effects #dock.dock-shelf-v7 button:focus-visible,
  body.mobile-shell #dock.dock-shelf-v7 button,
  body.mobile-shell #dock.dock-shelf-v7 button:hover,
  body.mobile-shell #dock.dock-shelf-v7 button:focus-visible {
    transform: none !important;
  }
}
@media (pointer: coarse) {
  #dock button,
  #dock button:hover,
  #dock button:focus-visible,
  #dock.dock-shelf-v7 button,
  #dock.dock-shelf-v7 button:hover,
  #dock.dock-shelf-v7 button:focus-visible,
  body.calm-effects #dock.dock-shelf-v7 button,
  body.calm-effects #dock.dock-shelf-v7 button:hover,
  body.calm-effects #dock.dock-shelf-v7 button:focus-visible,
  body.mobile-shell #dock.dock-shelf-v7 button,
  body.mobile-shell #dock.dock-shelf-v7 button:hover,
  body.mobile-shell #dock.dock-shelf-v7 button:focus-visible {
    transform: none !important;
  }
}

/*  ═══════════════════════════════════════════════════════════════════════
    [ * ]  FW-5.4 OWNER FINDINGS · 19 Jul - three small truths, one block
    ─────────────────────────────────────────────────────────────────────── */

/* Context menu rows sat inline-flex with centred content - every row centred
   its own icon+copy block, so the list read as random stair-step indents.
   Rows are rails: full width, flush left, text ragged-right. */
.kyr-context-menu .kyr-context-item {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  text-align: left;
}

/* About toolbar buttons - one voice per surface. "View source"/"Reading
   view" and "Copy" ran different sizes, weights, paddings and heights per
   mode, and a legacy hover reset (border:0 + transparent) made Copy collapse
   into a bare blob on hover. One recipe, both buttons, both modes. */
#experience .toolbar .about-source-toggle,
#experience .toolbar .toolbar-icon.copy-md {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 30px;
  min-width: 0;
  min-height: 30px;
  padding: 0 13px;
  border: 1px solid rgba(200, 218, 238, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
  color: #b7c3d0;
  font: 650 11px/1 var(--font-body);
  letter-spacing: 0.015em;
  text-transform: none;
  transform: none;
  box-shadow: none;
  transition:
    background var(--motion-focus),
    border-color var(--motion-focus),
    color var(--motion-focus);
}
#experience .toolbar .about-source-toggle:hover,
#experience .toolbar .toolbar-icon.copy-md:hover {
  border-color: rgba(125, 216, 247, 0.42);
  background: rgba(255, 255, 255, 0.075);
  color: #edf4fb;
  transform: none;
  box-shadow: none;
}
#experience .toolbar .about-source-toggle:focus-visible,
#experience .toolbar .toolbar-icon.copy-md:focus-visible {
  outline: 2px solid rgba(121, 199, 242, 0.62);
  outline-offset: -2px;
}
#experience .toolbar .toolbar-icon.copy-md.copied {
  border-color: rgba(121, 217, 154, 0.42);
  color: #79d99a;
  background: rgba(121, 217, 154, 0.08);
}

/* Source-mode breadcrumb ("content / experience.md"): a generic toolbar rule
   capped the span at 24px, so align-self:stretch pinned it to the bar's TOP
   and the text rode ~11px above centre. Full-height tab, text centred, the
   underline keeps its seat on the bar's floor. */
#experience:not(.is-reading) > .toolbar > span.about-title-source {
  align-self: stretch;
  height: auto;
  min-height: 100%;
  align-items: center;
}

/*  ═══════════════════════════════════════════════════════════════════════
    [ * ]  FW-6 · THE LIVING OBSERVATORY - instrument, pupil, cabin alert
    ─────────────────────────────────────────────────────────────────────────
    The arm rotates about the pier pivot via ONE custom property
    (--fw-obs-angle, park 22deg). Transitions only run when the observatory
    module changes the property - the resting landing stays at zero
    animations (FW-3.2 pin). Reduced motion: the scene is a still. */
#fwObsArm {
  transform-box: view-box;
  transform-origin: 1162px 380.5px;
  transform: rotate(var(--fw-obs-angle, 22deg));
  transition: transform 1.7s var(--ease-transit, cubic-bezier(0.22, 1, 0.36, 1));
}
#fwObsPupil {
  transition: opacity 0.6s ease;
}
.wallpaper-scene .fw-ref-win {
  transition: opacity 1.1s ease;
}
/* The cabin notices first: while an event is live, both windows come up. */
.mountain-wallpaper.fw-obs-alert {
  --dl-window: 1;
  --dl-window-dim: 0.82;
}
@media (prefers-reduced-motion: reduce) {
  #fwObsArm,
  #fwObsPupil,
  .wallpaper-scene .fw-ref-win {
    transition: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   [ * ]  FW-8 LIBRARY · the writing surface
   ──────────────────────────────────────────────────────────────────────
   One window, two states. `.is-reading` swaps the index for the reader;
   `.is-source` swaps rendered prose for the raw Markdown. The reading
   column is capped at a measure, not at the window width - a 1440px
   window must not produce 1440px lines. ★
   ────────────────────────────────────────────────────────────────────── */

#library.win {
  min-width: 560px;
  min-height: 520px;
}
#library .library-index,
#library .library-reader {
  height: calc(100% - 44px);
  overflow: auto;
  padding: 30px clamp(22px, 4vw, 46px) 46px;
}
#library .library-reader,
#library.is-reading .library-index {
  display: none;
}
#library.is-reading .library-reader {
  display: block;
}

/* ──[ · ]── index ─────────────────────────────────────────────────────── */
.library-head {
  max-width: 62ch;
  margin-bottom: 26px;
}
.library-head h1 {
  margin: 8px 0 6px;
  font: 700 clamp(26px, 3.4vw, 38px) / 1.12 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--cream);
}
.library-head p {
  margin: 0;
  max-width: 54ch;
  color: var(--muted);
  font: var(--type-body);
}
.library-list {
  display: grid;
  gap: 12px;
  max-width: 70ch;
}
.library-card {
  position: relative;
  display: block;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
  cursor: pointer;
  transition:
    border-color var(--motion-focus),
    background var(--motion-focus),
    transform var(--motion-focus);
}
.library-card:hover,
.library-card:focus-visible {
  border-color: color-mix(in srgb, var(--cyan) 42%, transparent);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
}
.library-card:focus-visible {
  outline: 2px solid var(--fw-accent, #62d0f7);
  outline-offset: 2px;
}
.library-card-meta,
.library-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  color: var(--muted-2);
  font: var(--type-chip);
  letter-spacing: var(--type-chip-ls);
  text-transform: uppercase;
}
/* .sample-chip carries margin-left:auto so it can sit at the far right of a
   work-card kicker row. In a meta line it should read as one more item in the
   sequence, not as something flung to the opposite margin. */
.library-card-meta .sample-chip,
.library-article-meta .sample-chip {
  margin-left: 0;
}
.library-card h3 {
  margin: 0 0 6px;
  font: 700 19px/1.28 var(--font-display);
  color: var(--cream);
}
.library-card-standfirst {
  margin: 0 0 10px;
  max-width: 56ch;
  color: var(--muted);
  font: var(--type-body);
}
.library-card-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--cyan);
  font: var(--type-label);
  letter-spacing: var(--type-label-ls);
}
.library-card-more::after {
  content: "→";
}
.library-empty {
  padding: 30px 22px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  color: var(--muted);
  font: var(--type-body);
}
.library-empty-title {
  margin: 0 0 4px;
  color: var(--cream);
  font: 700 17px/1.3 var(--font-display);
}

/* ──[ · ]── reader ────────────────────────────────────────────────────── */
.library-reader-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 68ch;
  margin: 0 auto 22px;
}
.library-article {
  max-width: 68ch;
  margin: 0 auto;
}
.library-article-title {
  margin: 0 0 10px;
  font: 700 clamp(27px, 3.6vw, 40px) / 1.1 var(--font-display);
  letter-spacing: -0.015em;
  color: var(--cream);
}
.library-article-title:focus-visible {
  outline: 2px solid var(--fw-accent, #62d0f7);
  outline-offset: 4px;
  border-radius: 4px;
}
.library-article-meta {
  margin-bottom: 26px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
#library .library-source {
  display: none;
}
#library.is-source .library-prose {
  display: none;
}
#library.is-source .library-source {
  display: block;
}

/* ──[ · ]── prose · the only place this site sets a reading rhythm ────── */
.md-doc-p {
  margin: 0 0 1.15em;
  color: var(--fw-paper, #eef5ff);
  font: var(--type-body);
  font-size: 16.5px;
  line-height: 1.72;
}
.md-doc-h {
  color: var(--cream);
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  /* space above a heading belongs to the section it opens, not the one it
     closes - so the top margin is the large one. */
  margin: 1.9em 0 0.6em;
}
.md-doc-h1 {
  font-size: 30px;
  line-height: 1.16;
  margin-top: 0;
}
.md-doc-h2 {
  font-size: 22px;
  line-height: 1.24;
}
.md-doc-h3 {
  font-size: 17.5px;
  line-height: 1.3;
}
.md-doc-h4,
.md-doc-h5,
.md-doc-h6 {
  font-size: 15.5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.md-doc-list {
  margin: 0 0 1.15em;
  padding-left: 1.35em;
  color: var(--fw-paper, #eef5ff);
  font: var(--type-body);
  font-size: 16.5px;
  line-height: 1.72;
}
.md-doc-list li {
  margin-bottom: 0.4em;
}
.md-doc-list li::marker {
  color: color-mix(in srgb, var(--cyan) 70%, transparent);
}
.md-doc-quote {
  margin: 1.5em 0;
  padding: 2px 0 2px 20px;
  border-left: 2px solid color-mix(in srgb, var(--cyan) 55%, transparent);
  color: var(--cream);
}
.md-doc-quote .md-doc-p {
  margin-bottom: 0.5em;
  font-size: 17px;
  font-style: italic;
  color: var(--cream);
}
.md-doc-quote .md-doc-p:last-child {
  margin-bottom: 0;
}
.md-doc-code {
  padding: 0.14em 0.4em;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--kyr-ed-code, #a7f3d0);
  font-family: var(--font-mono);
  font-size: 0.88em;
}
.md-doc-pre {
  margin: 1.4em 0;
  padding: 16px 18px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(4, 9, 18, 0.72);
}
.md-doc-pre code {
  color: var(--kyr-ed-text, #dce6f2);
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.62;
  white-space: pre;
}
.md-doc-hr {
  margin: 2.2em 0;
  border: 0;
  border-top: 1px solid var(--line);
}
.md-doc-figure {
  margin: 1.6em 0;
}
.md-doc-figure img,
.md-doc-inline-img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}
.md-doc-figure figcaption {
  margin-top: 8px;
  color: var(--muted-2);
  font: var(--type-winmeta);
}
.library-prose a {
  color: var(--cyan);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.library-prose a:hover {
  color: var(--cream);
}

@media (max-width: 760px) {
  #library.win {
    min-width: 0;
  }
  #library .library-index,
  #library .library-reader {
    padding: 22px 18px 40px;
  }
}

/* ──[ · ]── source view · the same file, shown as the file ─────────────
   markdown-view.js emits one .md-row (gutter + line) per source line. Its
   full treatment is scoped to #experience, which owns the editor chrome -
   active line, cursor, status bar. The Library wants none of that: just a
   legible monospace document with a quiet gutter. Lines WRAP here rather
   than scroll, because prose lines are long and an article is for reading,
   not for cursor archaeology. ★ */
#library .library-source {
  font-family: var(--kyr-ed-mono, monospace);
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--kyr-ed-text, #dce6f2);
}
#library .library-source .md-row {
  display: grid;
  grid-template-columns: 2.6em 1fr;
  align-items: baseline;
  column-gap: 16px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
#library .library-source .md-gutter {
  text-align: right;
  font-size: 0.78em;
  color: var(--kyr-ed-punct, #74849b);
  opacity: 0.6;
  user-select: none;
  -webkit-user-select: none;
}
#library .library-source .md-line {
  min-width: 0;
}
#library .library-source .md-punct {
  color: var(--kyr-ed-punct, #74849b);
}
#library .library-source .md-strong {
  color: var(--kyr-ed-strong, #f3f7fc);
  font-weight: 700;
}
#library .library-source .md-em {
  font-style: italic;
}
#library .library-source .md-code-span {
  color: var(--kyr-ed-code, #a7f3d0);
}
#library .library-source .md-row.is-heading .md-line {
  color: var(--kyr-ed-heading, #f3f7fc);
  font-weight: 700;
}

/* Project teasers share one quiet, manual gallery language. The controls sit
   inside the frame and never auto-advance: a teaser should wait to be read. */
.work-card:focus-within {
  border-color: color-mix(in srgb, var(--card-accent, var(--cyan)) 58%, rgba(170, 196, 218, 0.24));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--card-accent, var(--cyan)) 14%, transparent),
    0 16px 34px rgba(2, 8, 18, 0.28);
}
#homeProjectGrid button.work-card-more,
#projectGrid button.work-card-more {
  width: max-content;
  max-width: 100%;
  min-height: 34px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  box-shadow: none;
  text-align: left;
  cursor: pointer;
}
button.work-card-more:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--card-accent, var(--cyan)) 76%, white);
  outline-offset: 3px;
}
.work-card:focus-within .work-card-more {
  color: var(--card-accent, var(--cyan));
  opacity: 1;
}
.work-card:focus-within .work-card-more .kyr-icon {
  transform: translateX(3px);
}
.work-card-media,
.case-gallery,
.reel-media {
  position: relative;
}
.work-card-media .project-gallery-slide,
.case-gallery .project-gallery-slide,
.reel-media .reel-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-panel);
}
.work-card-media .project-gallery-slide.is-active,
.case-gallery .project-gallery-slide.is-active,
.reel-media .reel-slide.is-active {
  opacity: 1;
}
.work-card:hover .work-card-media .project-gallery-slide,
.work-card:focus-visible .work-card-media .project-gallery-slide {
  transform: none;
}
.case-gallery {
  aspect-ratio: 16 / 10;
}
.project-gallery-portrait .project-gallery-slide,
.project-gallery-contain .project-gallery-slide,
.reel-media.project-gallery-portrait .reel-slide {
  object-fit: contain;
  object-position: center;
  background: #061110;
}
.case-gallery.project-gallery-portrait {
  width: min(100%, 280px);
  aspect-ratio: 208 / 436;
  margin: 0 auto 26px;
}
.project-gallery-controls,
.reel-gallery-controls {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px;
  border: 1px solid rgba(224, 236, 248, 0.2);
  border-radius: 999px;
  color: rgba(242, 247, 253, 0.82);
  background: rgba(5, 11, 22, 0.76);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.work-card-media .project-gallery-controls {
  right: 10px;
  bottom: 10px;
}
.case-gallery .project-gallery-controls {
  right: 14px;
  bottom: 14px;
}
.reel-gallery-controls {
  top: 14px;
  right: 14px;
}
.project-gallery-controls button,
.reel-gallery-controls button {
  width: 30px;
  height: 30px;
  min-width: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #f4f8fd;
  background: rgba(255, 255, 255, 0.09);
  font: 500 22px/1 var(--font-body);
  cursor: pointer;
}
.project-gallery-controls button:hover,
.reel-gallery-controls button:hover {
  background: rgba(125, 216, 247, 0.22);
}
.project-gallery-controls span,
.reel-gallery-controls span {
  min-width: 38px;
  text-align: center;
  font: 700 10px/1 var(--font-mono);
  letter-spacing: 0.06em;
}

@media (prefers-reduced-motion: reduce) {
  .project-gallery-slide,
  .reel-slide {
    transition: none !important;
  }
}

@media (max-width: 700px) {
  #homeProjectGrid button.work-card-more,
  #projectGrid button.work-card-more {
    min-height: 44px;
  }
}

/* Resizable desktop windows answer to their own frame, not the browser
   viewport. Keep these contracts at the end of the cascade so older viewport
   fallbacks cannot hold a wide composition inside a narrow floating window. */
#home .main,
#player .playerbody {
  overflow-anchor: none;
}

@container developer-files (max-width: 760px) {
  #homeProjectGrid.work-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  #homeProjectGrid .work-card-featured {
    grid-column: auto;
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  #homeProjectGrid .work-card-featured .work-card-media {
    aspect-ratio: 16 / 9;
    min-height: 0;
    max-height: none;
    margin-bottom: 0;
  }
  #homeProjectGrid .work-card-featured .work-card-body {
    padding: 16px;
  }
  #home .home-section-title {
    gap: 12px;
    margin-bottom: 16px;
  }
}

#player.win {
  container: player / size;
}
#player #playlist {
  flex: 1 1 auto;
}

@container player (max-width: 620px) {
  #player .playerbody,
  #player .playerbody.player-redesign {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: max-content max-content;
    grid-auto-rows: max-content;
    overflow-y: auto;
  }
  #player .music-console,
  #player .music-queue {
    min-height: max-content;
  }
  #player .sound-shaping:not([open]) {
    position: static;
    inset: auto;
    height: auto;
    min-height: 34px;
    max-height: none;
    flex: 0 0 auto;
    margin-top: 2px;
  }
}

@container player (max-height: 560px) {
  #player .playerbody,
  #player .playerbody.player-redesign {
    gap: 10px;
    padding: 10px;
  }
  #player .track {
    gap: 8px;
    padding: 12px;
  }
  #player .tracktop,
  #player .music-head {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 10px;
  }
  #player .cover {
    width: 58px;
    height: 58px;
    border-radius: 13px;
  }
  #player .cover::after {
    inset: 15px;
    border-width: 6px;
  }
  #player .viz {
    height: 34px;
    min-height: 34px;
  }
  #player .music-controls {
    gap: 10px;
    margin: 0;
  }
  #player .music-controls button {
    width: 36px;
    height: 36px;
    min-width: 36px;
  }
  #player .music-controls .play {
    width: 46px;
    height: 46px;
  }
  #player .sound-shaping summary {
    min-height: 34px;
  }
  #player .playlist {
    padding: 12px 10px;
  }
  #player .playlist h4 {
    margin-bottom: 6px;
  }
  #player #playlist {
    gap: 2px;
  }
  #player #playlist .song {
    min-height: 38px;
    padding: 6px 8px;
  }
  #player .playlist-actions {
    margin-top: 8px;
  }
  #player .playlist-note {
    padding-top: 6px;
  }
}