@import url("styles.css");

.project-accordion {
  border-bottom: 1px solid var(--line);
}

.project-accordion .project {
  border-bottom: 0;
}

.project-toggle {
  width: 100%;
  margin: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.project-toggle:focus-visible {
  z-index: 2;
  outline: 2px solid var(--red);
  outline-offset: 4px;
}

.project-toggle-icon {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  font-size: 25px;
  font-weight: 350;
  line-height: 1;
  transition: color 180ms ease, transform 320ms var(--ease);
}

.project-toggle:hover .project-toggle-icon,
.project-accordion.is-open .project-toggle-icon {
  color: var(--red);
}

.project-accordion.is-open .project-toggle-icon {
  transform: rotate(45deg);
}

.project-accordion.is-open .project::before {
  opacity: 1;
  transform: scaleY(1);
}

.project-panel {
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: height 560ms var(--ease), opacity 260ms ease;
}

.project-panel.is-open {
  opacity: 1;
}

.project-panel-inner {
  padding: 10px 0 80px 80px;
}

.showcase {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 242px;
  gap: clamp(28px, 4vw, 54px);
  align-items: start;
}

.showcase-canvas {
  min-width: 0;
}

.showcase-kicker,
.rail-label,
.browser-bar,
.stage-caption,
.arcade-pair figcaption,
.tool-detail figcaption,
.watch-shot figcaption {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  font-weight: 680;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.showcase-kicker {
  margin: 0 0 17px;
  color: var(--muted);
}

.browser-frame {
  position: relative;
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(33, 29, 24, 0.18);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(33, 29, 24, 0.12);
}

.browser-bar {
  display: grid;
  height: 34px;
  grid-template-columns: 58px 1fr 58px;
  align-items: center;
  border-bottom: 1px solid rgba(33, 29, 24, 0.12);
  background: #f8f5ef;
  color: #887e73;
  text-align: center;
  text-transform: none;
}

.browser-dots {
  display: block;
  width: 7px;
  height: 7px;
  margin-left: 14px;
  border-radius: 50%;
  background: #e16a5f;
  box-shadow: 13px 0 #e2b44d, 26px 0 #7dac65;
}

.browser-frame img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: top;
}

.browser-frame--dark .browser-bar {
  border-color: rgba(255, 255, 255, 0.1);
  background: #101725;
  color: #96a0b5;
}

.showcase-rail {
  position: sticky;
  top: 24px;
  padding-top: 27px;
  border-top: 1px solid var(--ink);
}

/* GameWobble has enough native releases to work as a shelf, not a sidebar. */
.showcase.showcase--gamewobble {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(36px, 5vw, 60px);
}

.showcase-rail--gamewobble {
  position: static;
  top: auto;
  display: grid;
  grid-template-columns: minmax(190px, 0.28fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: 0 clamp(30px, 4vw, 54px);
  padding-top: 22px;
}

.showcase-rail--gamewobble > .rail-label:first-child {
  grid-column: 1;
  grid-row: 1;
}

.showcase-rail--gamewobble > .destination-link {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
}

.showcase-rail--gamewobble > .rail-label--stores {
  grid-column: 2;
  grid-row: 1;
  margin-top: 0;
}

.showcase-rail--gamewobble > .native-app-list {
  grid-column: 2;
  grid-row: 2;
  grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
  align-items: start;
}

.rail-label {
  margin: 0 0 11px;
  color: var(--muted);
}

.rail-label--stores {
  margin-top: 34px;
}

.destination-link,
.store-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.destination-link {
  min-height: 74px;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: color 180ms ease;
}

.destination-link span,
.store-link span {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 13px;
  font-weight: 760;
  line-height: 1.25;
}

.destination-link small,
.store-link small {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 720;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.destination-link b,
.store-link b {
  flex: 0 0 auto;
  color: var(--red);
  font-size: 17px;
  font-weight: 500;
}

.destination-link:hover,
.store-link:hover {
  color: var(--red);
}

.store-stack {
  display: grid;
  gap: 8px;
}

.store-link {
  min-height: 64px;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(33, 29, 24, 0.2);
  border-radius: 7px;
  background: rgba(255, 253, 248, 0.46);
  transition: border-color 180ms ease, color 180ms ease, transform 180ms var(--ease);
}

.store-link:hover {
  border-color: var(--red);
  transform: translateY(-1px);
}

.store-link svg {
  width: 22px;
  max-height: 27px;
  flex: 0 0 22px;
  fill: currentColor;
}

.store-link b {
  margin-left: auto;
}

.store-link--soon {
  border-style: dashed;
  color: #8b8176;
  cursor: default;
}

.store-link--soon:hover {
  border-color: rgba(33, 29, 24, 0.2);
  color: #8b8176;
  transform: none;
}

.rail-note {
  margin: 28px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.native-app-list {
  display: grid;
  gap: 9px;
}

.native-app-card {
  display: grid;
  height: 84px;
  box-sizing: border-box;
  grid-template-columns: minmax(0, 1fr) 32px;
  grid-template-rows: 26px 40px;
  gap: 3px 8px;
  padding: 7px 11px;
  border: 1px solid rgba(33, 29, 24, 0.2);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.5);
}

.native-app-card--soon {
  border-style: dashed;
  background: rgba(255, 253, 248, 0.28);
}

.native-app-heading {
  display: flex;
  grid-column: 1 / -1;
  gap: 8px;
  align-items: flex-start;
  justify-content: space-between;
}

.native-app-heading h4 {
  min-width: 0;
  margin: 0;
  font-size: 12.5px;
  font-weight: 780;
  line-height: 1.05;
}

.native-app-status {
  flex: 0 0 auto;
  padding: 3px 5px;
  border-radius: 3px;
  background: var(--ink);
  color: var(--paper);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 7px;
  font-weight: 760;
  letter-spacing: 0.07em;
  line-height: 1;
  text-transform: uppercase;
}

.native-app-status--soon {
  border: 1px solid rgba(33, 29, 24, 0.24);
  background: transparent;
  color: var(--muted);
}

.official-store-badge {
  display: inline-flex;
  grid-column: 1;
  grid-row: 2;
  width: max-content;
  min-height: 40px;
  align-items: center;
  align-self: end;
  border-radius: 5px;
}

.official-store-badge:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

.official-store-badge img {
  display: block;
  width: auto;
  height: 40px;
  object-fit: contain;
}

.native-platform-icon {
  display: block;
  width: 30px;
  height: 30px;
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  justify-self: end;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 22px 22px;
}

.native-platform-icon--ios {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23211d18' stroke-width='1.8'%3E%3Crect x='6.5' y='2.5' width='11' height='19' rx='2.5'/%3E%3Cpath d='M10 5h4M11 18.5h2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.native-platform-icon--mac {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23211d18' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4' width='19' height='13' rx='2'/%3E%3Cpath d='M8.5 21h7M10 17l-.7 4M14 17l.7 4'/%3E%3C/svg%3E");
}

.native-platform-icon--android {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233ddc84' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m7 5-1.5-2M17 5l1.5-2M5 10h14v7.5A2.5 2.5 0 0 1 16.5 20h-9A2.5 2.5 0 0 1 5 17.5V10ZM5 10a7 7 0 0 1 14 0M2.5 10v7M21.5 10v7M8 20v2M16 20v2'/%3E%3Ccircle cx='9' cy='7.5' r='.6' fill='%233ddc84' stroke='none'/%3E%3Ccircle cx='15' cy='7.5' r='.6' fill='%233ddc84' stroke='none'/%3E%3C/svg%3E");
}

.native-platform-icon--windows {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230078d4'%3E%3Cpath d='M2 3.5 10.5 2v9H2V3.5Zm9.5-1.7L22 0v11H11.5V1.8ZM2 12h8.5v9L2 19.5V12Zm9.5 0H22v11l-10.5-1.8V12Z'/%3E%3C/svg%3E");
}

.native-platform-icon--watch {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23211d18' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5 10 2h4l1 3M9 19l1 3h4l1-3'/%3E%3Crect x='6' y='5' width='12' height='14' rx='4'/%3E%3Cpath d='M12 8v4l2.5 1.5'/%3E%3C/svg%3E");
}

/* GameWobble — colorful titles breaking out of a restrained browser frame. */
.arcade-pair {
  display: grid;
  margin-top: 20px;
  grid-template-columns: 1.13fr 0.87fr;
  gap: 20px;
  align-items: start;
}

.arcade-pair figure {
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: 9px;
  background: #151515;
  box-shadow: 0 18px 42px rgba(33, 29, 24, 0.13);
}

.arcade-pair figure:last-child {
  margin-top: 54px;
}

.arcade-pair img {
  width: 100%;
  height: auto;
  aspect-ratio: 12 / 7;
  object-fit: cover;
}

.arcade-pair figcaption {
  position: absolute;
  right: 12px;
  bottom: 11px;
  padding: 7px 9px;
  border-radius: 4px;
  background: rgba(12, 12, 12, 0.82);
  color: #fff;
}

/* Shared native-screen language. */
.phone {
  overflow: hidden;
  margin: 0;
  border: 3px solid #171717;
  border-radius: 25px;
  background: #111;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.24);
}

.phone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Cielos — a precise, orbital phone arrangement. */
.phone-stage {
  position: relative;
  min-height: 570px;
  margin-top: 22px;
  overflow: hidden;
  border-radius: 11px;
  background:
    radial-gradient(circle at 50% 32%, rgba(88, 171, 255, 0.22), transparent 34%),
    linear-gradient(145deg, #0a1726, #020810 74%);
}

.phone-stage::before,
.phone-stage::after {
  position: absolute;
  border: 1px solid rgba(120, 196, 255, 0.14);
  border-radius: 50%;
  content: "";
}

.phone-stage::before {
  inset: 12% -14%;
  transform: rotate(-12deg);
}

.phone-stage::after {
  inset: 24% 4%;
  transform: rotate(18deg);
}

.phone-stage .phone {
  position: absolute;
  z-index: 2;
  top: 66px;
  width: 29%;
  aspect-ratio: 760 / 1652;
}

.phone-stage .phone--left {
  left: 7%;
  transform: rotate(-6deg) translateY(36px);
}

.phone-stage .phone--center {
  z-index: 3;
  left: 35.5%;
}

.phone-stage .phone--right {
  right: 7%;
  transform: rotate(6deg) translateY(36px);
}

.stage-caption {
  position: absolute;
  z-index: 4;
  right: 20px;
  bottom: 17px;
  color: rgba(230, 242, 255, 0.62);
}

/* developers.do — one clear browser and two offset tool cards. */
.tool-pair {
  display: grid;
  width: 92%;
  margin: -26px 0 0 auto;
  grid-template-columns: 1.06fr 0.94fr;
  gap: 18px;
  align-items: start;
}

.tool-pair .tool-detail:last-child {
  margin-top: 40px;
}

.tool-detail {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(132, 154, 198, 0.24);
  border-radius: 9px;
  background: #040a15;
  box-shadow: 0 25px 60px rgba(2, 8, 23, 0.22);
}

.tool-detail img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: top center;
}

.tool-detail figcaption {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: #a7b0c2;
}

/* DownRangeHQ — range-red field with timer, history and watch. */
.range-stage {
  position: relative;
  min-height: 590px;
  margin-top: 22px;
  overflow: hidden;
  border-radius: 11px;
  background: linear-gradient(145deg, #351312 0%, #8b2520 50%, #23100f 100%);
}

.range-stage::before {
  position: absolute;
  top: 42px;
  right: -64px;
  width: 280px;
  height: 280px;
  border: 1px solid rgba(255, 236, 213, 0.24);
  border-radius: 50%;
  box-shadow: 0 0 0 48px rgba(255, 236, 213, 0.04), 0 0 0 96px rgba(255, 236, 213, 0.03);
  content: "";
}

.range-line {
  position: absolute;
  top: 48%;
  right: 0;
  left: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
}

.range-phone {
  position: absolute;
  top: 56px;
  width: 31%;
  aspect-ratio: 1320 / 2868;
}

.range-phone--timer {
  left: 9%;
  transform: rotate(-5deg);
}

.range-phone--runs {
  left: 38%;
  transform: translateY(50px) rotate(3deg);
}

.watch-shot {
  position: absolute;
  right: 4%;
  bottom: 78px;
  width: 27%;
  margin: 0;
}

.watch-shot img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 20px 24px rgba(0, 0, 0, 0.32));
}

.watch-shot figcaption {
  margin-top: 3px;
  color: rgba(255, 247, 236, 0.68);
  text-align: center;
}

/* Terremoto — editorial orange with a seismograph running behind the phones. */
.quake-stage {
  position: relative;
  min-height: 580px;
  margin-top: 22px;
  overflow: hidden;
  border-radius: 11px;
  background: linear-gradient(145deg, #f2ac35 0%, #e66d2f 100%);
}

.seismic-line {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 72px;
  opacity: 0.24;
  background: url("assets/projects/terremoto.png") center / 100% auto no-repeat;
  mix-blend-mode: multiply;
}

.quake-phone {
  position: absolute;
  top: 60px;
  width: 29%;
  aspect-ratio: 832 / 1800;
}

.quake-phone--map {
  left: 5%;
  transform: translateY(40px) rotate(-5deg);
}

.quake-phone--list {
  z-index: 2;
  left: 35.5%;
}

.quake-phone--detail {
  right: 5%;
  transform: translateY(40px) rotate(5deg);
}

/* Incendio — a smoky topographic field around the current incident feed. */
.wildfire-stage {
  position: relative;
  min-height: 600px;
  margin-top: 22px;
  overflow: hidden;
  border-radius: 11px;
  background:
    radial-gradient(circle at 82% 18%, rgba(240, 177, 99, 0.24), transparent 28%),
    radial-gradient(circle at 18% 78%, rgba(112, 145, 133, 0.3), transparent 33%),
    linear-gradient(145deg, #283b3c 0%, #1a292b 48%, #101b1d 100%);
}

.wildfire-stage::before,
.wildfire-stage::after {
  position: absolute;
  border: 1px solid rgba(238, 196, 139, 0.15);
  border-radius: 48% 52% 43% 57%;
  content: "";
  transform: rotate(-13deg);
}

.wildfire-stage::before {
  inset: 9% -16% 20% 10%;
}

.wildfire-stage::after {
  inset: 22% -3% 8% -22%;
  border-color: rgba(165, 206, 188, 0.11);
  transform: rotate(17deg);
}

.wildfire-rings {
  position: absolute;
  top: 74px;
  right: -56px;
  width: 260px;
  height: 260px;
  border: 1px solid rgba(248, 168, 81, 0.23);
  border-radius: 50%;
  box-shadow:
    0 0 0 42px rgba(248, 168, 81, 0.035),
    0 0 0 84px rgba(248, 168, 81, 0.02);
}

.wildfire-emblem {
  position: absolute;
  z-index: 1;
  top: 34px;
  left: 50%;
  width: 66px;
  height: 66px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 16px;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.24);
  transform: translateX(-50%);
}

.wildfire-phone {
  position: absolute;
  top: 92px;
  width: 29%;
  aspect-ratio: 1284 / 2778;
}

.wildfire-phone--list {
  left: 5%;
  transform: translateY(42px) rotate(-5deg);
}

.wildfire-phone--map {
  z-index: 2;
  left: 35.5%;
}

.wildfire-phone--detail {
  right: 5%;
  transform: translateY(42px) rotate(5deg);
}

.wildfire-source {
  position: absolute;
  z-index: 3;
  right: 18px;
  bottom: 15px;
  margin: 0;
  color: rgba(226, 239, 232, 0.58);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 9px;
  font-weight: 680;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Erupción — a magma bloom banked under topographic contour lines. */
.volcano-stage {
  position: relative;
  min-height: 600px;
  margin-top: 22px;
  overflow: hidden;
  border-radius: 11px;
  background:
    radial-gradient(circle at 50% 97%, rgba(237, 92, 41, 0.33), transparent 43%),
    radial-gradient(circle at 15% 11%, rgba(124, 74, 104, 0.34), transparent 37%),
    linear-gradient(158deg, #3b1a2c 0%, #2a1220 52%, #170a12 100%);
}

.volcano-stage::before,
.volcano-stage::after {
  position: absolute;
  border: 1px solid rgba(247, 158, 54, 0.14);
  border-radius: 50%;
  content: "";
}

.volcano-stage::before {
  inset: 44% -30% -36% -30%;
}

.volcano-stage::after {
  inset: 60% -14% -54% -14%;
  border-color: rgba(247, 158, 54, 0.1);
}

.volcano-rings {
  position: absolute;
  top: 64px;
  left: -72px;
  width: 244px;
  height: 244px;
  border: 1px solid rgba(195, 59, 30, 0.26);
  border-radius: 50%;
  box-shadow:
    0 0 0 38px rgba(195, 59, 30, 0.04),
    0 0 0 76px rgba(195, 59, 30, 0.022);
}

.volcano-emblem {
  position: absolute;
  z-index: 1;
  top: 34px;
  left: 50%;
  width: 66px;
  height: 66px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 16px;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.3);
  transform: translateX(-50%);
}

.volcano-phone {
  position: absolute;
  top: 92px;
  width: 29%;
  aspect-ratio: 1284 / 2778;
}

.volcano-phone--list {
  left: 5%;
  transform: translateY(42px) rotate(-5deg);
}

.volcano-phone--map {
  z-index: 2;
  left: 35.5%;
}

.volcano-phone--detail {
  right: 5%;
  transform: translateY(42px) rotate(5deg);
}

.volcano-source {
  position: absolute;
  z-index: 3;
  right: 18px;
  bottom: 15px;
  margin: 0;
  color: rgba(244, 226, 232, 0.55);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 9px;
  font-weight: 680;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* AgentHelper — overlapping Mac windows, like a small working desktop. */
.mac-stack {
  position: relative;
  min-height: 520px;
  margin-top: 22px;
  overflow: hidden;
  border: 1px solid rgba(59, 75, 96, 0.2);
  border-radius: 11px;
  background:
    radial-gradient(circle at 25% 20%, rgba(119, 160, 214, 0.35), transparent 36%),
    linear-gradient(145deg, #e2e8ee, #9eabb9);
}

.mac-window {
  position: absolute;
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(21, 29, 40, 0.26);
  border-radius: 9px;
  background: #202733;
  box-shadow: 0 28px 60px rgba(21, 29, 40, 0.25);
}

.mac-window img {
  width: 100%;
  height: auto;
}

.mac-window--back {
  top: 45px;
  left: 5%;
  width: 65%;
  transform: rotate(-3deg);
}

.mac-window--front {
  z-index: 3;
  top: 118px;
  left: 19%;
  width: 66%;
}

.mac-window--side {
  z-index: 2;
  right: -14%;
  bottom: 36px;
  width: 58%;
  transform: rotate(4deg);
}

/* Silicon Scope — live telemetry layered across desktop and mobile. */
.silicon-stage {
  position: relative;
  min-height: 620px;
  margin-top: 22px;
  overflow: hidden;
  border-radius: 11px;
  background:
    radial-gradient(circle at 78% 22%, rgba(75, 173, 255, 0.3), transparent 32%),
    radial-gradient(circle at 18% 78%, rgba(99, 241, 184, 0.2), transparent 34%),
    linear-gradient(145deg, #0a1930, #07101f 68%, #020711);
}

.silicon-orbit {
  position: absolute;
  top: 44px;
  right: -120px;
  width: 390px;
  height: 390px;
  border: 1px solid rgba(137, 207, 255, 0.22);
  border-radius: 50%;
  box-shadow:
    0 0 0 58px rgba(137, 207, 255, 0.035),
    0 0 0 116px rgba(137, 207, 255, 0.025);
}

.silicon-window {
  position: absolute;
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(211, 232, 255, 0.38);
  border-radius: 9px;
  background: #eaf2f8;
  box-shadow: 0 28px 60px rgba(0, 7, 20, 0.42);
}

.silicon-window img {
  display: block;
  width: 100%;
  height: auto;
}

.silicon-window--summary {
  top: 46px;
  left: 4%;
  width: 78%;
  transform: rotate(-1.5deg);
}

.silicon-window--benchmark {
  bottom: 50px;
  left: 8%;
  width: 60%;
  transform: rotate(2.5deg);
}

.silicon-phone {
  position: absolute;
  z-index: 3;
  width: 25%;
  aspect-ratio: 832 / 1800;
}

.silicon-phone--performance {
  right: 16%;
  bottom: -55px;
  transform: rotate(-4deg);
}

.silicon-phone--benchmark {
  right: -3%;
  bottom: 20px;
  transform: rotate(5deg);
}

@media (max-width: 940px) {
  .showcase {
    grid-template-columns: minmax(0, 1fr) 210px;
    gap: 28px;
  }

  .project-panel-inner {
    padding-left: 40px;
  }

  .phone-stage,
  .range-stage,
  .quake-stage,
  .wildfire-stage,
  .volcano-stage {
    min-height: 500px;
  }

  .mac-stack,
  .silicon-stage {
    min-height: 440px;
  }
}

@media (max-width: 760px) {
  .project-panel-inner {
    padding: 4px 0 60px 40px;
  }

  .showcase {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }

  .showcase-canvas,
  .showcase-rail {
    width: 100%;
  }

  .showcase-rail {
    position: static;
    padding-top: 19px;
  }

  .showcase-rail--gamewobble {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    gap: 0;
  }

  .showcase-rail--gamewobble > .rail-label:first-child,
  .showcase-rail--gamewobble > .destination-link,
  .showcase-rail--gamewobble > .rail-label--stores,
  .showcase-rail--gamewobble > .native-app-list {
    grid-column: 1;
    grid-row: auto;
  }

  .showcase-rail--gamewobble > .rail-label--stores {
    margin-top: 30px;
  }

  .browser-bar {
    height: 29px;
    grid-template-columns: 48px 1fr 48px;
    font-size: 8px;
  }

  .browser-dots {
    width: 6px;
    height: 6px;
    margin-left: 11px;
    box-shadow: 11px 0 #e2b44d, 22px 0 #7dac65;
  }

  .browser-frame {
    border-radius: 7px;
  }

  .arcade-pair {
    gap: 11px;
  }

  .arcade-pair figure:last-child {
    margin-top: 27px;
  }

  .arcade-pair figcaption {
    display: none;
  }

  .phone-stage,
  .range-stage,
  .quake-stage,
  .wildfire-stage,
  .volcano-stage,
  .mac-stack,
  .silicon-stage {
    width: calc(100vw - 19px);
    margin-left: -21px;
    border-radius: 0;
  }

  .phone-stage {
    min-height: 420px;
  }

  .phone-stage .phone {
    top: 53px;
    width: 34%;
    border-width: 2px;
    border-radius: 17px;
  }

  .phone-stage .phone--left {
    left: 2%;
  }

  .phone-stage .phone--center {
    left: 33%;
  }

  .phone-stage .phone--right {
    right: 2%;
  }

  .stage-caption {
    right: 15px;
    font-size: 8px;
  }

  .tool-pair {
    width: 92%;
    grid-template-columns: 1fr;
    margin-top: -14px;
    gap: 14px;
  }

  .tool-pair .tool-detail:last-child {
    margin-top: 0;
  }

  .tool-detail figcaption {
    padding: 10px;
    font-size: 8px;
  }

  .tool-detail figcaption span:last-child {
    display: none;
  }

  .range-stage,
  .quake-stage,
  .wildfire-stage,
  .volcano-stage {
    min-height: 440px;
  }

  .range-phone,
  .quake-phone,
  .wildfire-phone,
  .volcano-phone {
    top: 48px;
    border-width: 2px;
    border-radius: 18px;
  }

  .range-phone {
    width: 35%;
  }

  .range-phone--timer {
    left: 4%;
  }

  .range-phone--runs {
    left: 33%;
  }

  .watch-shot {
    right: 0;
    bottom: 61px;
    width: 34%;
  }

  .watch-shot figcaption {
    display: none;
  }

  .quake-phone {
    width: 34%;
  }

  .quake-phone--map {
    left: 1%;
  }

  .quake-phone--list {
    left: 33%;
  }

  .quake-phone--detail {
    right: 1%;
  }

  .wildfire-emblem {
    top: 19px;
    width: 48px;
    height: 48px;
    border-radius: 12px;
  }

  .wildfire-phone {
    top: 68px;
    width: 34%;
  }

  .wildfire-phone--list {
    left: 1%;
  }

  .wildfire-phone--map {
    left: 33%;
  }

  .wildfire-phone--detail {
    right: 1%;
  }

  .wildfire-source {
    right: 12px;
    bottom: 10px;
    font-size: 7px;
  }

  .volcano-emblem {
    top: 19px;
    width: 48px;
    height: 48px;
    border-radius: 12px;
  }

  .volcano-phone {
    top: 68px;
    width: 34%;
  }

  .volcano-phone--list {
    left: 1%;
  }

  .volcano-phone--map {
    left: 33%;
  }

  .volcano-phone--detail {
    right: 1%;
  }

  .volcano-source {
    right: 12px;
    bottom: 10px;
    font-size: 7px;
  }

  .mac-stack {
    min-height: 350px;
  }

  .mac-window--back {
    top: 43px;
    left: 1%;
    width: 73%;
  }

  .mac-window--front {
    top: 103px;
    left: 10%;
    width: 79%;
  }

  .mac-window--side {
    right: -25%;
    bottom: 22px;
    width: 72%;
  }

  .silicon-stage {
    min-height: 430px;
  }

  .silicon-window--summary {
    top: 38px;
    left: 3%;
    width: 84%;
  }

  .silicon-window--benchmark {
    bottom: 32px;
    left: 4%;
    width: 65%;
  }

  .silicon-phone {
    width: 29%;
    border-width: 2px;
    border-radius: 18px;
  }

  .silicon-phone--performance {
    right: 15%;
    bottom: -47px;
  }

  .silicon-phone--benchmark {
    right: -3%;
    bottom: 14px;
  }

  .rail-label--stores {
    margin-top: 26px;
  }

  .store-stack {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-panel,
  .project-toggle-icon {
    transition: none;
  }
}