/* The app directory is a small, usable launcher in both the room and its own page. */
.phone-experience {
  display: grid;
  grid-template-columns: minmax(290px, 360px) minmax(0, 1fr);
  grid-template-areas: "device intro" "device detail";
  grid-template-rows: auto 1fr;
  align-items: center;
  column-gap: clamp(38px, 7vw, 100px);
  row-gap: 25px;
  margin: 0 0 64px;
}
.phone-experience > .content-heading { grid-area: intro; align-self: end; margin: 0; }
.phone-experience > .content-heading h1 { font-size: clamp(39px, 4vw, 56px); line-height: 1.03; margin: 13px 0 17px; }
.phone-experience > .content-heading > p:last-child { max-width: 550px; font-size: 13px; line-height: 1.6; }
.phone-stage {
  grid-area: device;
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 14px 10px 25px;
  background: radial-gradient(ellipse at 50% 50%, #72958324 0, #516f5a0d 48%, transparent 74%);
}
.phone-device {
  position: relative;
  width: min(100%, 326px);
  aspect-ratio: 326 / 626;
  padding: 11px;
  border: 1px solid #828f83;
  border-radius: 48px;
  background: linear-gradient(135deg, #747f75, #252d2b 18%, #151c1a 68%, #647166);
  box-shadow: 0 34px 82px #0008, inset 0 0 0 2px #161d1b, inset 0 0 0 4px #c4ccad20;
  transform: rotate(-2deg);
  transition: transform .5s ease, box-shadow .5s ease;
}
.phone-device:hover { transform: rotate(-1deg) translateY(-3px); box-shadow: 0 40px 90px #0009, inset 0 0 0 2px #161d1b; }
.phone-speaker {
  position: absolute;
  z-index: 2;
  top: 18px;
  left: 50%;
  width: 70px;
  height: 11px;
  transform: translateX(-50%);
  border-radius: 20px;
  background: #101714;
  box-shadow: inset 0 1px 2px #71837760;
}
.phone-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  padding: 31px 18px 18px;
  border: 1px solid #82928932;
  border-radius: 38px;
  color: #f5f1e8;
  background: radial-gradient(circle at 78% 12%, #73977b6b, transparent 34%),
    radial-gradient(circle at 10% 80%, #354e585e, transparent 46%),
    linear-gradient(155deg, #1e302d, #17211f 54%, #101816);
}
.phone-screen:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, #ffffff14, transparent 27%, transparent 76%, #ffffff08);
}
.phone-screen-top, .phone-screen-bottom { position: relative; display: flex; justify-content: space-between; align-items: center; }
.phone-screen-top { font: 9px/1.4 ui-monospace, SFMono-Regular, monospace; letter-spacing: .18em; color: #d9e3d2; }
.phone-signal { font-size: 13px; line-height: 1; color: #dcd4ad; }
.phone-screen-intro { position: relative; display: grid; gap: 6px; margin: 39px 1px 4px; }
.phone-screen-intro small { font: 8px/1.5 ui-monospace, SFMono-Regular, monospace; letter-spacing: .2em; color: #acbaa7; }
.phone-screen-intro strong { max-width: 190px; font: 400 27px/1.08 Georgia, serif; letter-spacing: -.04em; }
.phone-screen-intro > span { font-size: 10px; color: #c6d0c2; }
.phone-app-grid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 17px 5px; margin-top: 28px; }
.phone-app-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 73px;
  padding: 2px;
  border-radius: 14px;
  color: #f2f1e7;
  text-align: center;
  transition: transform .2s ease, background .2s ease;
}
.phone-app-tile:hover, .phone-app-tile:focus-visible { transform: translateY(-4px); background: #ffffff14; }
.phone-app-tile.is-selected .phone-icon { outline: 2px solid #f2dfba; outline-offset: 3px; box-shadow: 0 8px 18px #0006, 0 0 22px #dac79d44; }
.phone-icon {
  --icon-a: #8dc7ac;
  --icon-b: #315d4f;
  display: grid;
  place-items: center;
  flex: none;
  width: 49px;
  height: 49px;
  overflow: hidden;
  border: 1px solid #ffffff6b;
  border-radius: 14px;
  background: linear-gradient(145deg, var(--icon-a), var(--icon-b));
  box-shadow: 0 7px 13px #0005, inset 0 1px 1px #fff6;
  color: #fffdf3;
  font: 700 13px/1 ui-monospace, SFMono-Regular, monospace;
  letter-spacing: -.03em;
  text-shadow: 0 1px 2px #0008;
}
.phone-icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
.phone-icon.tone-cyan { --icon-a: #8dc8d5; --icon-b: #2c6877; }
.phone-icon.tone-rose { --icon-a: #d9a4a4; --icon-b: #835361; }
.phone-icon.tone-violet { --icon-a: #b9a9d8; --icon-b: #665581; }
.phone-icon.tone-amber { --icon-a: #e3c591; --icon-b: #8e643d; }
.phone-app-name { max-width: 68px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 8px; line-height: 1.25; }
.phone-screen-bottom { margin-top: auto; padding-top: 17px; font: 8px/1.4 ui-monospace, SFMono-Regular, monospace; color: #a5b6a8; }
.phone-screen-bottom i { width: 32px; height: 3px; border-radius: 5px; background: #d0dacb70; }
.phone-details { grid-area: detail; align-self: start; min-width: 0; }
.phone-detail { animation: phone-detail-in .35s ease both; }
.phone-detail[hidden] { display: none; }
.phone-detail-back { display: none; }
.phone-detail-art { display: flex; align-items: center; justify-content: space-between; margin-bottom: 35px; color: #aab4a8; font: 10px ui-monospace, SFMono-Regular, monospace; letter-spacing: .16em; }
.phone-detail-art .phone-icon { width: 75px; height: 75px; border-radius: 21px; font-size: 22px; }
.phone-detail h2 { margin: 13px 0 20px; font-size: clamp(38px, 4.4vw, 65px); line-height: 1.02; font-weight: 450; letter-spacing: -.065em; }
.phone-detail-lead { max-width: 550px; font: 400 clamp(19px, 2vw, 26px)/1.4 Georgia, serif; color: #e2d8bf; }
.phone-detail-story { max-width: 550px; margin: 18px 0 29px; font-size: 13px; line-height: 1.8; color: #adb8ad; }
.phone-detail-story:empty { display: none; }
.phone-detail-cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 34px; min-height: 48px; padding: 0 19px; border: 1px solid #c7d1b659; border-radius: 6px; color: #e9e7d6; font-size: 12px; transition: background .2s, border-color .2s; }
.phone-detail-cta:hover { background: #b3cba31c; border-color: #d6dbbd; }
.phone-detail .project-resources { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 28px; padding: 0; font-size: 11px; }
.phone-detail .project-resources a { color: #c2ccbf; }
.phone-detail .project-resources a:hover { color: #fff; }
.phone-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@keyframes phone-detail-in { from { opacity: .45; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@media (max-width: 780px) {
  .phone-experience { grid-template-columns: 1fr; grid-template-areas: "intro" "device" "detail"; grid-template-rows: auto; gap: 32px; }
  .phone-stage { padding: 6px 0 18px; }
  .phone-device, .phone-device:hover { width: min(100%, 312px); transform: none; }
  .phone-details { max-width: 620px; }
  .phone-detail-back { display: inline-block; margin-bottom: 17px; color: #d4d5c4; font-size: 11px; }
  .phone-detail-art { margin-bottom: 20px; }
  .phone-detail h2 { font-size: clamp(35px, 9vw, 50px); }
}
@media (prefers-reduced-motion: reduce) {
  .phone-device, .phone-app-tile, .phone-detail { animation: none; transition: none; }
}