/* Personal identity, Finder views, and shared sound preferences. */
.profile-avatar {
  display: block;
  flex: none;
  object-fit: cover;
  border: 3px solid #fffdfb;
  border-radius: 50%;
  background: #f7f8fc;
  box-shadow: 0 3px 12px #75608016, 0 0 0 1px #e6dfea;
}
.welcome-window { height: 396px; }
.welcome-body, .immersive .welcome-body {
  display: flex;
  flex-direction: column;
  padding: 24px 27px 0;
  overflow: auto;
}
.welcome-eyebrow, .welcome-description, .welcome-buttons { flex: none; }
.welcome-greeting {
  display: flex;
  flex: none;
  align-items: center;
  gap: 13px;
  margin: 12px 0 8px;
  position: relative;
  z-index: 1;
}
.welcome-greeting .welcome-avatar { width: 60px; height: 60px; }
.welcome-greeting h1 { margin: 0; line-height: 1.1; }
.welcome-greeting .welcome-hello {
  display: block;
  margin-bottom: 4px;
  color: #7e6d88;
  font: 500 13px/1.2 var(--ui);
  letter-spacing: .3px;
}
.welcome-greeting .welcome-name { display: block; font-size: 36px; line-height: 1.1; }
.welcome-description { max-width: 265px; font-size: 12px; line-height: 1.8; }
.welcome-mascot { right: 18px; top: 64px; width: 138px; height: 152px; }
.mascot-sparkle { right: 27px; top: 47px; }
.mascot-little { right: 145px; top: 184px; }
.welcome-buttons { margin-top: 18px; }
.welcome-bottom, .immersive .welcome-bottom {
  flex: none;
  min-height: 38px;
  margin-top: auto;
  padding: 10px 0;
}
.about-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.about-heading h2 { margin-bottom: 0; }
.about-heading .about-avatar { width: 86px; height: 86px; }
.about-fields dt { flex: none; }
.about-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.about-footer .about-link { min-height: 44px; }
.about-companion { width: 40px; height: 45px; object-fit: contain; transform: rotate(6deg); }

/* Both views use the same filtered project collection and opening action. */
.finder-toolbar {
  display: grid;
  grid-template-columns: minmax(95px, 1fr) auto minmax(125px, 165px);
  align-items: center;
  flex: none;
  gap: 12px;
  padding-bottom: 15px;
}
.finder-title { min-width: 0; }
.finder-view-switch {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: #f0eaf2;
  border: 1px solid #e8dfee;
  border-radius: 9px;
}
.finder-view-switch button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 52px;
  min-height: 30px;
  padding: 6px 7px;
  border-radius: 6px;
  color: #89738f;
  font-size: 9px;
}
.finder-view-switch button svg { width: 13px; height: 13px; }
.finder-view-switch button[aria-pressed="true"] { background: #fffdfb; color: #715881; box-shadow: 0 1px 4px #75517f14; }
.finder-view-switch button:hover { color: #624c72; }
.finder-view-switch button:focus-visible { outline-offset: 1px; }
.finder-toolbar .finder-search { width: 100%; min-width: 0; min-height: 34px; }
.finder-toolbar .finder-search input { font-size: 11px; }
.finder-toolbar .finder-search:focus-within { outline: 2px solid #a58ab5; outline-offset: 2px; }
.finder-results-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #d7cbdc transparent;
}
.finder-results-scroll [hidden] { display: none !important; }
.project-results { list-style: none; margin: 0; }
.project-item { min-width: 0; }
.project-results.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  overflow: visible;
  padding: 3px 16px 18px;
}
.project-card { width: 100%; }
.project-card:focus-visible { outline-offset: -3px; }
.project-icon-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 58px minmax(34px, auto) 18px;
  align-items: center;
  gap: 7px 6px;
  min-height: 148px;
  padding: 13px 8px 12px;
  border-color: transparent;
  background: transparent;
  text-align: center;
  overflow: visible;
}
.project-icon-card:hover { background: #f4eef7; border-color: #e5dbea; box-shadow: none; transform: translateY(-2px); }
.project-icon-card > .app-icon { grid-column: 1 / -1; justify-self: center; width: 56px; height: 56px; border-radius: 16px; }
.project-icon-card > .app-icon > svg { width: 39px; height: 39px; }
.project-name { color: #584760; font-size: 11px; font-weight: 600; line-height: 1.5; }
.project-icon-card .project-name { grid-column: 1 / -1; align-self: start; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.project-icon-category { justify-self: end; white-space: nowrap; font-size: 9px; color: #7e6d88; }
.project-access { display: inline-flex; align-items: center; justify-content: center; justify-self: start; width: max-content; max-width: 100%; white-space: nowrap; padding: 2px 5px; border-radius: 5px; background: #f1eaf5; color: #735c7f; font-size: 8px; font-weight: 400; }
.project-access[data-access="public"] { background: #eaf1e5; color: #59704d; }
.project-access[data-access="pending"] { background: #f6eee3; color: #805d3d; }
.project-list-header, .project-row { display: grid; grid-template-columns: minmax(0, 1fr) 58px 76px 15px; align-items: center; gap: 12px; }
.project-list-header { position: sticky; top: 0; z-index: 1; min-height: 31px; padding: 6px 23px; border-top: 1px solid #ece5ef; border-bottom: 1px solid #ece5ef; background: #f6f1f7; color: #8a7394; font-size: 9px; }
.project-results.project-list { display: block; padding: 5px 12px 15px; }
.project-list .project-item + .project-item { margin-top: 3px; }
.project-row { min-height: 64px; padding: 10px; border-color: transparent; border-radius: 8px; background: transparent; }
.project-row:hover { transform: none; background: #f1eaf5; box-shadow: none; }
.project-row-main { display: flex; align-items: center; min-width: 0; gap: 11px; }
.project-row .app-icon { width: 38px; height: 38px; border-radius: 11px; flex: none; }
.project-row .app-icon:after { border-radius: 10px; }
.project-row .app-icon > svg { width: 28px; height: 28px; }
.project-row-copy { display: block; min-width: 0; }
.project-row-copy > span, .project-row-copy > strong { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.project-row .project-name { font-size: 11px; }
.project-row-tagline { font-size: 9px; color: #8b7896; margin-top: 3px; }
.project-row-category { color: #7e6d88; font-size: 10px; }
.project-row-copy .project-row-mobile-category { display: none; }
.project-row-arrow { width: 13px; height: 13px; color: #b49ac0; }
.finder-status { flex: none; gap: 12px; font-size: 9px; }
.finder-status > span { white-space: nowrap; }

/* A separate sound page keeps the six choices easy to compare. */
.settings-tabs { gap: 4px; }
.settings-tabs button { min-height: 36px; }
.audio-master { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px; margin: 17px 0; border: 1px solid #e8ddeb; border-radius: 12px; background: #f6f0f8; }
.audio-master strong { font-size: 12px; font-weight: 600; }
.audio-master small { display: block; margin-top: 4px; color: #8b7396; font-size: 10px; }
.audio-master .toggle-button { flex: none; width: 44px; height: 28px; padding: 4px; }
.audio-master .toggle-button:before { width: 20px; height: 20px; }
.audio-master .toggle-button[aria-checked="true"] { background: #9c7caf; }
.audio-master .toggle-button[aria-checked="true"]:before { transform: translateX(16px); }
.audio-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; border: 0; }
.audio-preset { min-width: 0; border: 1px solid #e8dfea; border-radius: 11px; background: #fffdfb; overflow: hidden; }
.audio-preset.is-selected { border-color: #ab89bd; box-shadow: 0 0 0 1px #ab89bd; background: #f8f2fb; }
.audio-preset-select { display: flex; align-items: flex-start; width: 100%; min-height: 88px; gap: 9px; padding: 13px 11px 10px; text-align: left; }
.audio-preset-select:focus-visible, .audio-preset-preview:focus-visible { outline-offset: -3px; }
.audio-preset-symbol { display: flex; align-items: center; justify-content: center; flex: none; width: 29px; height: 29px; border-radius: 9px; background: #eee3f5; color: #a081af; }
.audio-preset:nth-child(3n+2) .audio-preset-symbol { background: #f5e8df; color: #b58d78; }
.audio-preset:nth-child(3n) .audio-preset-symbol { background: #eaf0e3; color: #8c9e7a; }
.audio-preset-symbol svg { width: 16px; height: 16px; }
.audio-preset-copy { flex: 1; min-width: 0; }
.audio-preset-copy strong { display: block; color: #6a5275; font-size: 11px; font-weight: 600; }
.audio-preset-copy small { display: block; margin-top: 5px; color: #8b7595; font-size: 9px; line-height: 1.65; }
.audio-preset-check { flex: none; margin-top: 2px; color: #9270a6; opacity: 0; }
.audio-preset-check svg { width: 13px; height: 13px; }
.audio-preset.is-selected .audio-preset-check { opacity: 1; }
.audio-preset-preview { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 33px; padding: 8px; border-top: 1px solid #eee5f1; background: #faf7fc; color: #8a7097; font-size: 10px; }
.audio-preset-preview svg { width: 11px; height: 11px; }
.audio-preset-preview:hover, .audio-preset-preview.is-previewing { color: #715184; background: #eee3f4; }
.audio-volume { padding: 19px 0 8px; }
.audio-volume label { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: #776080; }
.audio-volume output { font-size: 11px; font-variant-numeric: tabular-nums; color: #92769f; }
.audio-volume input { display: block; width: 100%; min-height: 34px; margin: 5px 0 0; accent-color: #9674a6; cursor: pointer; }
.settings-content .audio-preview-note { margin: 4px 0 0; color: #9b86a4; font-size: 9px; }
.audio-feedback { min-height: 16px; padding-top: 6px; font-size: 9px; color: #8d709b; }
.audio-settings-link { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 9px; border-radius: 7px; color: #94719f; font-size: 10px; background: #f2eaf6; }
.audio-settings-link svg { width: 12px; height: 12px; }

@media (max-width: 700px) {
  .welcome-body, .immersive .welcome-body { padding: 18px 20px 0; }
  .welcome-greeting { gap: 10px; margin: 8px 0 6px; }
  .welcome-greeting .welcome-avatar { width: 48px; height: 48px; border-width: 2px; }
  .welcome-greeting .welcome-hello { font-size: 11px; margin-bottom: 3px; }
  .welcome-greeting .welcome-name { font-size: 32px; }
  .welcome-description { max-width: 190px; font-size: 11px; line-height: 1.8; }
  .welcome-mascot { right: 3px; top: 62px; width: 96px; height: 115px; }
  .mascot-sparkle { right: 17px; top: 43px; }
  .mascot-little { right: 90px; top: 161px; }
  .welcome-buttons { margin-top: 14px; }
  .welcome-bottom, .immersive .welcome-bottom { min-height: 32px; padding: 9px 0; }
  .welcome-tags { font-size: 7px; gap: 5px; }
  .welcome-version { font-size: 6px; }
  .about-heading { gap: 10px; }
  .about-heading h2 { font-size: 25px; }
  .about-heading .about-avatar { width: 70px; height: 70px; }
  .finder-toolbar { grid-template-columns: minmax(0, 1fr) auto; gap: 9px; padding: 12px 13px; }
  .finder-toolbar .finder-search { grid-column: 1 / -1; min-height: 40px; padding: 7px 10px; }
  .finder-toolbar .finder-search input { font-size: 16px; }
  .finder-toolbar .finder-search input::placeholder { font-size: 12px; }
  .finder-view-switch button { min-width: 49px; min-height: 38px; }
  .finder-view-switch button svg { width: 13px; height: 13px; }
  .project-results.project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 1px 11px 15px; }
  .project-icon-card { grid-template-rows: 52px minmax(34px, auto) 18px; min-height: 140px; padding: 11px 7px; }
  .project-icon-card > .app-icon { width: 50px; height: 50px; border-radius: 15px; }
  .project-icon-card > .app-icon > svg { width: 35px; height: 35px; }
  .project-icon-category { font-size: 8px; }
  .project-access { font-size: 8px; padding: 2px 4px; }
  .project-list-header { display: none; }
  .project-results.project-list { padding: 1px 7px 12px; }
  .project-row { grid-template-columns: minmax(0, 1fr) 64px 12px; gap: 8px; padding: 10px 7px; min-height: 65px; }
  .project-row-main { gap: 8px; }
  .project-row .app-icon { width: 34px; height: 34px; }
  .project-row .app-icon > svg { width: 26px; height: 26px; }
  .project-row .project-name { font-size: 11px; }
  .project-row .project-row-tagline, .project-row-category { display: none; }
  .project-row-copy .project-row-mobile-category { display: block; margin-top: 3px; color: #8a7294; font-size: 9px; }
  .project-row-arrow { width: 12px; height: 12px; }
  .finder-status { font-size: 8px; gap: 7px; padding: 7px 11px; }
  .settings-tabs button { min-height: 40px; padding: 7px 12px; }
  .audio-presets { gap: 9px; }
  .audio-preset-select { min-height: 94px; gap: 7px; padding: 11px 9px 9px; }
  .audio-preset-symbol { display: none; }
  .audio-preset-copy strong { font-size: 11px; }
  .audio-preset-copy small { font-size: 10px; }
  .audio-preset-preview { min-height: 40px; }
  .audio-volume input { min-height: 44px; }
  .audio-settings-link { min-height: 40px; }
}
@media (max-width: 370px) {
  .welcome-body, .immersive .welcome-body { padding-left: 16px; padding-right: 16px; }
  .welcome-mascot { width: 79px; right: 0; }
  .welcome-greeting .welcome-name { font-size: 30px; }
  .welcome-greeting .welcome-avatar { width: 44px; height: 44px; }
  .about-heading h2 { font-size: 20px; }
  .about-heading .about-avatar { width: 60px; height: 60px; }
  .project-row { grid-template-columns: minmax(0, 1fr) 62px; gap: 6px; }
  .project-row-arrow { display: none; }
}
@media (pointer: coarse) {
  .finder-view-switch button, .filter-button { min-height: 44px; }
  .audio-preset-preview { min-height: 44px; }
}

/* Computer choices live inside preferences; the actual hardware stays in the scene. */
.settings-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  position: sticky;
  top: 0;
  z-index: 2;
  padding-bottom: 8px;
  background: #fcfaf7;
}
.settings-tabs button { padding-left: 6px; padding-right: 6px; white-space: nowrap; }
.computer-settings { --device-color: #eee2c9; }
.computer-section { min-width: 0; margin: 20px 0 0; padding: 0; border: 0; }
.computer-section legend { width: 100%; margin-bottom: 10px; padding: 0; color: #715d7e; font-size: 12px; font-weight: 600; }
.computer-model-options, .computer-effect-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.computer-model-card, .computer-effect {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: 12px 8px 11px;
  border: 1px solid #e7deeb;
  border-radius: 12px;
  background: #fffdfb;
  text-align: center;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.computer-model-card:hover, .computer-effect:hover { background: #f7f1f9; border-color: #c7afd4; }
.computer-model-card.is-selected, .computer-effect.is-selected { background: #f6effa; border-color: #a786b8; box-shadow: 0 0 0 1px #a786b8; }
.computer-model-card:focus-visible, .computer-effect:focus-visible { outline-offset: 2px; }
.computer-choice-check { position: absolute; top: 7px; right: 7px; display: flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%; background: #a786b8; color: #fffafc; opacity: 0; }
.computer-choice-check svg { width: 11px; height: 11px; }
.is-selected > .computer-choice-check { opacity: 1; }
.computer-model-art { width: 100%; max-width: 115px; height: 81px; margin: 3px 0 7px; }
.computer-model-card > strong, .computer-effect > strong { display: flex; align-items: center; justify-content: center; min-height: 31px; color: #6d557b; font-size: 10px; font-weight: 600; line-height: 1.5; }
.computer-model-description, .computer-effect-description { display: block; margin-top: 5px; color: #8b7797; font-size: 9px; line-height: 1.65; }
.settings-content .computer-section-note { margin: 10px 0 0; color: #9983a4; font-size: 9px; line-height: 1.8; }
.computer-finish-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.computer-finish { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 8px 6px; border: 1px solid #e8dfea; border-radius: 9px; color: #80688c; font-size: 10px; background: #fffdfb; }
.computer-finish:hover { border-color: #c7afd4; background: #faf6fc; }
.computer-finish.is-selected { border-color: #aa89bc; background: #f5eef9; box-shadow: inset 0 0 0 1px #aa89bc; }
.computer-finish-swatch { display: flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; border: 2px solid #fffc; border-radius: 50%; background: var(--finish-color); box-shadow: 0 0 0 1px #b4a0bc44; color: #66516e; }
.computer-finish-swatch svg { width: 12px; height: 12px; opacity: 0; }
.computer-finish.is-selected .computer-finish-swatch svg { opacity: 1; }
.computer-effect { padding-top: 11px; }
.computer-effect-preview { display: flex; align-items: center; justify-content: center; position: relative; width: 100%; height: 64px; overflow: hidden; border: 1px solid #e1d6e8; border-radius: 7px; background: linear-gradient(146deg, #c9b8d7 0 45%, #e9ccbc 45% 72%, #bbc4ad 72%); }
.effect-demo-window { position: relative; display: grid; align-content: center; justify-items: center; width: 48px; height: 40px; border: 1px solid #fff9; border-radius: 4px; background: #fcf8f2; box-shadow: 0 3px 7px #66526d1c; }
.effect-demo-window > i { position: absolute; top: 5px; left: 6px; width: 3px; height: 3px; border-radius: 50%; background: #d6a2a9; box-shadow: 5px 0 #dbc497, 10px 0 #b9c7a5; }
.effect-demo-window > b { margin-top: 5px; font: 500 15px/1.1 Georgia, serif; color: #887195; }
.effect-demo-window > span { font: 6px/1.5 ui-monospace, monospace; color: #a28bad; }
.computer-effect-preview::before, .computer-effect-preview::after { position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; }
.computer-effect-preview[data-effect="crt"]::before { content: ""; background: repeating-linear-gradient(to bottom, transparent 0 2px, #263c2b27 2px 3px), repeating-linear-gradient(to right, #ff7f6b08 0 1px, #83e5b109 1px 2px, #8da8ff09 2px 3px); }
.computer-effect-preview[data-effect="crt"]::after { content: ""; background: radial-gradient(ellipse at 50% 45%, transparent 48%, #193b302d 100%), linear-gradient(122deg, #ffffef45, transparent 42%); box-shadow: inset 0 0 9px 2px #1d332b25; }
.computer-effect-preview[data-effect="crt"] .effect-demo-window { text-shadow: -.3px 0 #84e8b77d, .3px 0 #de82be4d, 0 0 2px #91e0b54d; }
.computer-effect-preview[data-effect="soft"]::after { content: ""; background: linear-gradient(#ffe4ad24, #ffe4ad24), radial-gradient(ellipse at 40% 12%, #fff9dc40, transparent 80%); box-shadow: inset 0 0 10px #caa06a15; }
.computer-current { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 18px; padding: 10px 8px; border: 1px solid #eee6f0; border-radius: 8px; background: #f9f5fa; color: #8a7595; font-size: 9px; line-height: 1.7; text-align: center; }
.computer-current-dot { width: 5px; height: 5px; flex: none; border-radius: 50%; background: #a1b38e; }
.computer-scene-shortcut { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 19px; padding-top: 17px; border-top: 1px solid #ece3ef; }
.computer-scene-shortcut strong { display: block; color: #7e688a; font-size: 11px; font-weight: 500; }
.computer-scene-shortcut > div > span { display: block; margin-top: 4px; color: #a089aa; font-size: 9px; }
.computer-scene-shortcut button { flex: none; min-height: 40px; gap: 6px; padding: 9px 11px; font-size: 10px; }
.computer-scene-shortcut button svg { width: 12px; height: 12px; }
.computer-feedback { min-height: 18px; margin-top: 10px; color: #8b6d9b; font-size: 10px; }
@media (max-width: 700px) {
  .settings-tabs { gap: 3px; padding: 10px 12px 6px; }
  .settings-tabs button { min-height: 40px; padding: 7px 4px; font-size: 10px; }
  .computer-model-options, .computer-finish-options, .computer-effect-options { gap: 7px; }
  .computer-model-card { padding: 10px 6px 8px; }
  .computer-model-art { height: 65px; margin-top: 4px; margin-bottom: 3px; }
  .computer-choice-check { top: 5px; right: 5px; width: 15px; height: 15px; }
  .computer-choice-check svg { width: 10px; height: 10px; }
  .computer-model-description { display: none; }
  .computer-model-card > strong { font-size: 9px; min-height: 29px; }
  .computer-finish { flex-direction: column; gap: 5px; min-height: 63px; padding: 9px 5px; font-size: 9px; }
  .computer-effect { padding: 9px 6px; }
  .computer-effect-preview { height: 55px; }
  .computer-effect > strong { font-size: 10px; min-height: 29px; }
  .computer-effect-description { font-size: 8px; }
  .computer-scene-shortcut { align-items: flex-start; flex-direction: column; gap: 10px; }
  .computer-scene-shortcut button { min-height: 44px; }
  .computer-current { font-size: 8px; }
}