/* The studio desktop. Project windows retain the original macOS interaction. */
:root {
  --menu-height: 44px;
  --copper: #f7b38a;
  --studio-line: rgba(255, 255, 255, 0.14);
}

.wallpaper {
  background-image: url("/assets/studio-wallpaper-20261005.webp");
  filter: saturate(0.85);
  transform: none;
}

.wallpaper-shade {
  background: linear-gradient(90deg, rgba(8, 9, 11, 0.7), rgba(8, 9, 11, 0.25) 70%),
    linear-gradient(0deg, rgba(8, 9, 11, 0.85), transparent 50%);
}

.wallpaper-grain { opacity: 0.08; }
.menu-bar { padding-right: 24px; padding-left: 24px; background: rgba(14, 15, 17, 0.67); }
.menu-brand { font-size: 16px; }
.menu-nav { gap: 22px; }
.menu-nav .menu-nav__present { color: var(--copper); }
.menu-bar__right { gap: 18px; }
.availability { font-size: 11px; }
#menuClock { color: #a8a6a3; font-size: 11px; }

.search-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 9px;
  color: #c6c3bf;
  font-size: 11px;
  border: 1px solid var(--studio-line);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
}

.search-trigger:hover { color: white; background: rgba(255, 255, 255, 0.1); }
kbd { font-family: inherit; }
.search-trigger kbd { color: #8e8b87; font-size: 10px; }

.workspace { overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #4b4640 transparent; }
.home-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: center;
  gap: 32px 64px;
  width: min(1240px, calc(100% - 104px));
  margin: auto;
  padding: clamp(26px, 5vh, 65px) 0 130px;
}

.intro-card {
  position: relative;
  top: auto;
  left: auto;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.intro-card__eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #d1cbc4;
  font-size: 10px;
  letter-spacing: 0.12em;
}

.studio-spark { color: var(--copper); font-size: 24px; font-weight: 400; line-height: 1; }
.intro-card__edition { margin-left: 8px; color: #8f8b86; font-size: 8px; letter-spacing: 0.1em; }
.intro-card h1 {
  margin: 25px 0 22px;
  font-size: clamp(43px, 4.7vw, 72px);
  font-weight: 560;
  line-height: 1.04;
  letter-spacing: -0.06em;
}

.intro-card h1 em { color: var(--copper); font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -0.055em; }
.intro-card__copy { max-width: 425px; color: #b4b0ab; font-size: 14px; line-height: 1.75; }
.intro-card__stack { margin-top: 21px; gap: 9px; color: #ccc5bc; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 10px; font-weight: 450; }
.intro-card__stack i { background: #76624f; }
.intro-card__actions { margin-top: 26px; gap: 24px; }
.primary-button { min-height: 44px; padding: 0 17px; color: #211b15; border-radius: 8px; background: #f3e9dc; box-shadow: 0 7px 18px #0003, inset 0 1px #fff8; }
.text-button { min-height: 44px; color: #d3cdc5; font-size: 12px; text-decoration: none; }
.text-button:hover { color: white; }
.intro-card__details { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-top: 24px; color: #94908b; font-size: 11px; }
.intro-card__details > span > span { margin-left: 3px; color: #c9b098; }
.intro-card__details a { color: #c6beb4; text-decoration: none; }
.intro-card__details a:hover { color: white; text-decoration: underline; text-underline-offset: 4px; }

.sui-feature {
  position: relative;
  display: block;
  width: 100%;
  max-width: 440px;
  margin-left: auto;
  overflow: hidden;
  color: #f6f0e9;
  text-align: left;
  border: 1px solid rgba(217, 181, 148, 0.3);
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(41, 34, 29, 0.82), rgba(14, 15, 17, 0.76));
  box-shadow: 0 25px 65px #0005, inset 0 1px #ffffff0a;
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  animation: intro-in 800ms 170ms var(--ease) both;
  transition: transform 220ms var(--ease), border-color 220ms ease;
}

.sui-feature:hover { transform: translateY(-5px); border-color: #f7b38a80; }
.sui-feature__bar { display: flex; align-items: center; gap: 12px; min-height: 37px; padding: 0 15px; color: #b9b0a5; font-family: ui-monospace, "SFMono-Regular", monospace; font-size: 9px; border-bottom: 1px solid var(--studio-line); background: #08080826; }
.sui-feature__lights { display: flex; gap: 5px; }
.sui-feature__lights i { width: 6px; height: 6px; border-radius: 50%; background: #938174; }
.sui-feature__lights i:first-child { background: #c38466; }
.sui-feature__lights i:nth-child(2) { background: #b6a478; }
.sui-feature__lights i:last-child { background: #83917d; }
.sui-feature__new { margin-left: auto; color: var(--copper); font-size: 8px; letter-spacing: 0.1em; }
.sui-feature__body { display: block; padding: 19px 26px 21px; }
.sui-feature__heading { display: flex; align-items: center; justify-content: space-between; }
.sui-feature__heading > strong { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 88px; font-weight: 550; line-height: 0.95; letter-spacing: -0.09em; }
.sui-feature__heading > strong > span { color: var(--copper); }
.rust-badge { padding: 9px 11px; color: var(--copper); font-family: ui-monospace, "SFMono-Regular", monospace; font-size: 10px; line-height: 1.65; border: 1px solid #d6936038; border-radius: 8px; background: #d693600b; }
.rust-badge b { color: #aaa198; font-size: 9px; font-weight: 400; }
.sui-feature__title { display: block; margin-top: 18px; font-size: 27px; font-weight: 500; line-height: 1.05; letter-spacing: -0.035em; }
.sui-feature__copy { display: block; margin-top: 12px; color: #c0b8af; font-size: 11px; line-height: 1.6; }
.sui-feature__command { display: flex; align-items: center; gap: 10px; margin-top: 19px; font-family: ui-monospace, "SFMono-Regular", monospace; font-size: 11px; }
.sui-feature__command > span:first-child { color: #9d8b77; }
.terminal-cursor { width: 6px; height: 12px; background: #e5b38a; }
.sui-feature__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--studio-line); }
.sui-feature__footer > span:first-child { color: #aa9c8e; font-size: 7px; letter-spacing: 0.08em; }
.sui-feature__footer > span:last-child { color: #f8c09c; font-size: 10px; font-weight: 650; }

.desktop-files { position: relative; inset: auto; grid-column: 1 / -1; width: 100%; margin: 0; pointer-events: auto; }
.desktop-files__heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 0 18px; border-top: 1px solid var(--studio-line); }
.desktop-files__heading p { margin: 20px 0 0; color: #ded6cb; font-size: 9px; font-weight: 650; letter-spacing: 0.14em; }
.desktop-files__heading p > span { margin-left: 10px; color: #8d867e; font-weight: 400; }
.desktop-files__heading button { min-height: 44px; margin-top: 8px; color: #e1d0bd; font-size: 10px; text-shadow: 0 1px 4px #000c; background: transparent; }
.desktop-files__heading button:hover { color: white; }
.desktop-files__heading button > span { margin-left: 8px; color: var(--copper); }
.desktop-files__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.desktop-file { position: relative; inset: auto; width: 100%; min-width: 0; padding: 10px 4px; border: 1px solid transparent; border-radius: 11px; transition: transform 180ms var(--ease), background 180ms ease; }
.desktop-file:hover { background: #ffffff08; border-color: #ffffff12; }
.file-preview { width: 75px; height: 57px; border-radius: 8px; }
.file-preview__bar { transform: scale(0.8); transform-origin: top left; }
.file-preview__number { font-size: 25px; }
.file-preview__number--word { font-size: 12px; }
.desktop-file__name { margin-top: 12px; color: #e7ded2; font-size: 11px; }
.desktop-file__meta { margin-top: 4px; color: #b8ac9d; font-size: 9px; text-shadow: 0 1px 4px #000c; }
.folder-icon { width: 72px; height: 53px; margin-top: 4px; }
.folder-icon > span { font-size: 18px; }
.paper-icon { width: 46px; height: 57px; margin: 0; }
.paper-icon b { font-size: 18px; }
.desktop-signature { position: fixed; z-index: 0; bottom: 34px; left: 30px; right: 30px; display: flex; justify-content: space-between; color: #8e8579; font-family: ui-monospace, "SFMono-Regular", monospace; font-size: 8px; letter-spacing: 0.09em; pointer-events: none; }
.dock { gap: 7px; min-height: 62px; padding: 8px 10px; border-radius: 17px; background: linear-gradient(#ffffff12, #ffffff05), rgba(26, 25, 24, 0.78); }
.dock-item { flex-basis: 44px; width: 44px; height: 44px; }
.dock-icon { border-radius: 11px; }
.dock-wrap { bottom: calc(17px + env(safe-area-inset-bottom)); }
.dock-prompt { bottom: calc(92px + env(safe-area-inset-bottom)); }

/* Open-source browser and SUI case study. */
.build-filters { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 25px; }
.build-filters button { display: flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 12px; color: #625b52; font-size: 10px; font-weight: 600; border: 1px solid #d9d2c9; border-radius: 7px; background: transparent; }
.build-filters button[aria-pressed="true"] { color: #fbf1e5; border-color: #2b2723; background: #2b2723; }
.build-filters button:hover { border-color: #a39686; }
.build-filters span { opacity: 0.65; font-size: 9px; }
.software-grid { margin-top: 16px; }
.software-card--sui { grid-column: 1 / -1; min-height: 190px; background: radial-gradient(ellipse at 85% 20%, #6b4b3270, transparent 50%), #24201d; }
.software-card--sui::after { width: 200px; height: 200px; right: 55px; bottom: -95px; border-color: #e7b18c55; box-shadow: 0 0 0 24px #e7b18c08, 0 0 0 48px #e7b18c05; }
.software-card--sui strong { font-size: 37px; }
.software-card--sui p { max-width: 420px; font-size: 11px; }
.software-card--sui .software-card__open { position: absolute; right: 22px; bottom: 22px; color: var(--copper); }
.software-card__sui-dot { color: var(--copper); }
.software-card__index { color: #e1ded9b3; }
.software-card p { color: #e5e4e1cc; }
.software-card button:focus-visible, .build-filters button:focus-visible { outline-color: #966138; }
.project-share { align-self: start; margin-top: 10px; padding: 4px 0; color: #79634f; font-size: 9px; font-weight: 650; background: none; }
.project-share:hover { color: #17181d; text-decoration: underline; text-underline-offset: 3px; }
.project-media[data-kind="agent"] { background: #171715; }
.project-media[data-kind="agent"] .project-media__stage { display: flex; align-items: flex-start; justify-content: center; padding: 24px; overflow-y: auto; scrollbar-width: thin; }
.agent-preview { width: 100%; color: #f5eadd; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; }
.agent-preview__label { margin: 0 0 15px; color: #bea88f; font-size: 9px; letter-spacing: 0.08em; }
.agent-preview h4 { margin: 0; color: #f5d0b1; font-size: 70px; font-weight: 500; line-height: 1; letter-spacing: -0.09em; }
.agent-preview__subtitle { margin: 10px 0 20px; color: #b6aaa0; font-size: 10px; line-height: 1.7; }
.agent-pipeline { display: grid; gap: 9px; padding: 0; list-style: none; }
.agent-pipeline li { display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 10px; padding: 11px; border: 1px solid #d5a1792c; border-radius: 8px; background: #c79c7808; }
.agent-pipeline li > span { color: #bd9673; font-size: 10px; }
.agent-pipeline strong { display: block; color: #e1c7aa; font-size: 12px; font-weight: 500; }
.agent-pipeline p { margin: 4px 0 0; color: #b7b0a6; font-size: 9px; line-height: 1.5; }
.agent-preview__install { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; padding: 12px; border: 1px solid #ffffff18; border-radius: 7px; background: #0c0d0b; }
.agent-preview__install code { color: #c4b9a9; font-size: 10px; }
.agent-preview__install button { flex: 0 0 auto; padding: 6px 8px; color: #f4c49d; font-size: 9px; border-radius: 4px; background: #c4936420; }
.agent-preview__note { margin: 10px 0 0; color: #9c9182; font-size: 8px; line-height: 1.6; }

/* Native dialog gives search focus containment, Escape, and focus restoration. */
.project-search {
  width: min(580px, calc(100vw - 28px));
  max-height: calc(100svh - 90px);
  margin: min(16vh, 140px) auto auto;
  padding: 0;
  overflow: hidden;
  color: #ece5db;
  border: 1px solid #756452;
  border-radius: 14px;
  background: #1b1a18;
  box-shadow: 0 28px 100px #0009;
}

.project-search::backdrop { background: #08090bbf; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.project-search__header { display: flex; align-items: center; gap: 13px; height: 65px; padding: 0 19px; border-bottom: 1px solid #ffffff12; }
.project-search__header > svg { flex: 0 0 auto; color: #c39e7f; }
.project-search input { width: 100%; min-width: 0; padding: 10px 0; color: #f2e9dd; font: inherit; font-size: 14px; border: 0; outline: none; background: none; }
.project-search input::placeholder { color: #a89b8b; }
.project-search__header button { min-width: 35px; height: 32px; color: #a89b8b; font-size: 10px; border: 1px solid #ffffff1f; border-radius: 5px; background: #ffffff05; }
.project-search__results { display: grid; gap: 4px; max-height: min(48vh, 370px); padding: 8px; overflow-y: auto; }
.search-result { display: grid; grid-template-columns: 38px 1fr 20px; gap: 12px; align-items: center; width: 100%; min-height: 62px; padding: 9px 12px; color: #e9dfd1; text-align: left; border: 1px solid transparent; border-radius: 7px; background: none; }
.search-result:hover, .search-result.is-selected { border-color: #d7a67530; background: #c58b5317; }
.search-result__icon { display: grid; width: 35px; height: 35px; place-items: center; color: #e2b68e; font-size: 10px; border: 1px solid #bb87592b; border-radius: 7px; background: #bb875915; }
.search-result strong { display: block; font-size: 12px; font-weight: 600; }
.search-result small { display: block; margin-top: 4px; color: #b2a391; font-size: 10px; }
.search-result > span:last-child { color: #a3896f; }
.project-search__empty { padding: 18px 21px; color: #b1a18e; font-size: 12px; }
.project-search__footer { display: flex; justify-content: space-between; gap: 12px; padding: 12px 18px; color: #a69887; font-size: 9px; border-top: 1px solid #ffffff12; }
.project-search__footer > span:last-child > span { margin: 0 5px; }
.studio-toast { position: fixed; z-index: 8000; left: 50%; bottom: 104px; max-width: calc(100vw - 30px); padding: 12px 17px; color: #f0dcc4; font-size: 12px; overflow-wrap: anywhere; border: 1px solid #8d694e; border-radius: 9px; background: #25211d; box-shadow: 0 8px 30px #0005; transform: translateX(-50%); }
button:focus-visible, a:focus-visible { outline: 2px solid var(--copper); outline-offset: 4px; }

@media (min-width: 761px) and (max-height: 780px) {
  .home-layout { gap: 22px 55px; padding-top: 22px; padding-bottom: 90px; }
  .intro-card h1 { margin-top: 18px; margin-bottom: 17px; }
  .intro-card__actions { margin-top: 20px; }
  .intro-card__details { margin-top: 15px; }
  .intro-card__stack { margin-top: 16px; }
  .sui-feature__body { padding-top: 15px; padding-bottom: 16px; }
  .sui-feature__heading > strong { font-size: 72px; }
  .sui-feature__title { font-size: 24px; margin-top: 14px; }
  .sui-feature__copy { margin-top: 9px; }
  .sui-feature__command { margin-top: 14px; }
  .sui-feature__footer { margin-top: 15px; padding-top: 11px; }
  .desktop-files__heading { padding-bottom: 8px; }
}

@media (max-width: 1100px) {
  .home-layout { width: calc(100% - 64px); gap: 30px 36px; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .intro-card h1 { font-size: clamp(39px, 4.7vw, 52px); }
  .intro-card__edition { display: none; }
  .availability { display: none; }
  .menu-nav { gap: 18px; }
  .sui-feature__body { padding: 19px 22px; }
  .sui-feature__heading > strong { font-size: 74px; }
  .sui-feature__copy br { display: none; }
}

@media (max-width: 850px) {
  .menu-nav { gap: 13px; }
  #menuClock { display: none; }
  .home-layout { gap: 28px; }
  .intro-card h1 { font-size: 39px; }
  .intro-card__copy { font-size: 12px; }
  .intro-card__actions { gap: 12px; }
  .primary-button { gap: 10px; padding: 0 12px; font-size: 11px; }
  .text-button { font-size: 11px; }
  .sui-feature__heading > strong { font-size: 65px; }
  .rust-badge { padding: 7px; font-size: 9px; }
  .sui-feature__footer { flex-wrap: wrap; }
  .desktop-files__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
}

@media (max-width: 760px) {
  .wallpaper-shade { background: linear-gradient(90deg, #08090ba6, #08090b55), linear-gradient(0deg, #08090bcc, #08090b15); }
  .menu-bar { padding: env(safe-area-inset-top) 16px 0; }
  .menu-bar__left { gap: 19px; }
  .menu-nav { gap: 16px; }
  .menu-nav button[data-open="resume"], .menu-nav a.menu-nav__present { display: none; }
  .menu-bar__right { display: flex; }
  .search-trigger { min-height: 30px; border: 0; background: none; padding: 0 3px; }
  .search-trigger > span, .search-trigger kbd { display: none; }
  .search-trigger svg { width: 18px; height: 18px; }
  .workspace { padding-bottom: 0; }
  .home-layout { grid-template-columns: 1fr; width: calc(100% - 40px); gap: 30px; padding: 34px 0 116px; }
  .intro-card { margin: 0; padding: 0 3px; }
  .intro-card__eyebrow { font-size: 9px; letter-spacing: 0.09em; }
  .intro-card h1 { margin: 24px 0 20px; font-size: clamp(35px, 9vw, 59px); line-height: 1.09; }
  .intro-card__copy { max-width: 420px; font-size: 13px; line-height: 1.75; }
  .intro-card__stack { gap: 8px; font-size: 9px; }
  .intro-card__actions { margin-top: 24px; gap: 20px; }
  .primary-button { min-height: 44px; padding: 0 14px; font-size: 12px; }
  .text-button { font-size: 12px; }
  .intro-card__details { margin-top: 21px; font-size: 10px; }
  .sui-feature { max-width: none; }
  .sui-feature__body { padding: 21px 23px 23px; }
  .sui-feature__heading > strong { font-size: 82px; }
  .sui-feature__title { font-size: 28px; }
  .sui-feature__copy { max-width: 310px; font-size: 12px; }
  .rust-badge { padding: 10px 12px; font-size: 10px; }
  .sui-feature__footer { flex-wrap: nowrap; }
  .desktop-files { margin: 0; }
  .desktop-files__heading { padding-bottom: 18px; }
  .desktop-files__heading p { font-size: 8px; }
  .desktop-files__heading p > span { margin-left: 5px; }
  .desktop-files__heading button { font-size: 9px; }
  .desktop-files__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 21px 12px; }
  .desktop-file { padding: 14px 4px; }
  .file-preview { width: 88px; height: 67px; }
  .desktop-file__name { font-size: 12px; }
  .desktop-file__meta { font-size: 10px; }
  .folder-icon { width: 80px; height: 60px; margin-top: 7px; }
  .paper-icon { width: 53px; height: 67px; }
  .desktop-signature { display: none; }
  .dock { min-height: 61px; padding: 8px 10px; }
  .dock-item { flex-basis: 44px; width: 44px; height: 44px; }
  .dock-wrap { bottom: calc(11px + env(safe-area-inset-bottom)); }
  .window { bottom: calc(85px + env(safe-area-inset-bottom)); }
  .window-bar__status { font-size: 8px; }
  .project-share { margin-top: 20px; min-height: 35px; font-size: 11px; }
  .software-card--sui { grid-column: 1; min-height: 245px; }
  .software-card--sui p { max-width: 240px; }
  .software-card--sui .software-card__open { position: static; }
  .build-filters { gap: 6px; }
  .build-filters button { min-height: 38px; padding: 0 10px; font-size: 9px; }
  .project-media[data-kind="agent"] { height: auto; min-height: 480px; }
  .project-media[data-kind="agent"] .project-media__stage { position: relative; padding: 26px 22px; }
  .agent-preview h4 { font-size: 64px; }
  .agent-preview__label { margin-bottom: 15px; }
  .agent-preview__subtitle { margin-bottom: 20px; }
  .agent-preview__install code { font-size: 9px; }
  .project-search { margin-top: 70px; }
  .project-search__header { gap: 10px; padding: 0 12px; }
  .project-search input { font-size: 12px; }
  .project-search__results { max-height: 48svh; }
}

@media (max-width: 380px) {
  .home-layout { width: calc(100% - 34px); }
  .intro-card h1 { font-size: 33px; }
  .intro-card__actions { gap: 16px; }
  .intro-card__details { gap: 16px; }
  .menu-nav { gap: 14px; }
  .desktop-files__heading p > span { display: none; }
  .sui-feature__footer > span:first-child { font-size: 6px; }
  .sui-feature__heading > strong { font-size: 70px; }
  .rust-badge { flex-shrink: 0; padding: 8px 9px; font-size: 9px; white-space: nowrap; }
}