.deck-page { background: #102F1F; }
.deck-page h1, .deck-page h2, .deck-page h3 { text-wrap: balance; }
.deck-hero { min-height: calc(100dvh - 92px); padding: 26px 0 18px; display: grid; grid-template-columns: minmax(390px,490px) minmax(0,1fr); grid-template-rows: minmax(700px,1fr); column-gap: clamp(30px,3vw,50px); }
.deck-hero-copy { grid-column: 1; grid-row: 1; padding: 55px 0 22px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.deck-hero h1 { width: 100%; margin: 0; color: #B1E76E; font-family: var(--display); font-size: clamp(75px,5.15vw,88px); font-weight: 900; letter-spacing: -.065em; line-height: .83; text-transform: uppercase; }.deck-hero h1 .deck-hero-line { width: 138%; display: block; color: #B1E76E; font-size: 1em; letter-spacing: inherit; white-space: nowrap; transform: scaleX(.72); transform-origin: left center; }.deck-hero h1 .deck-hero-line.is-deck { font-size: .61em; letter-spacing: -.045em; }
.deck-hero h1 span, .deck-section-head h2 span, .deck-feature-statement h2 span, .deck-delivery-copy h2 span, .deck-closing h2 span { color: #B1E76E; }
.deck-hero-copy > p { max-width: 440px; margin: 26px 0 20px; color: #F7FAF7; font: 400 clamp(15px,1.08vw,18px)/1.5 var(--mono); }.deck-hero-share { width: 100%; max-width: 440px; margin: 0 0 26px; padding: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border: 1px solid rgba(177,231,110,.55); list-style: none; }.deck-hero-share li { min-width: 0; min-height: 63px; padding: 9px 7px; display: flex; flex-direction: column; justify-content: center; gap: 8px; color: #B1E76E; border-right: 1px solid rgba(177,231,110,.38); }.deck-hero-share li:last-child { border-right: 0; }.deck-hero-share span { font: 400 18px/1 var(--mono); }.deck-hero-share b { color: #F7FAF7; font: 700 8px/1.2 var(--mono); text-transform: uppercase; }.deck-hero .button-row { width: 100%; max-width: 350px; align-items: stretch; flex-direction: column; gap: 17px; }.deck-hero .button { min-height: 58px; justify-content: space-between; font-size: 14px; }.deck-inline-link { min-height: 40px; padding: 0 2px; display: flex; align-items: center; justify-content: space-between; color: #B1E76E; border-bottom: 1px solid #B1E76E; font: 800 12px/1 var(--mono); text-transform: uppercase; }
.deck-hero-appbar { min-height: 42px; padding: 0 13px; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; align-items: center; border-bottom: 1px solid rgba(177,231,110,.28); font-size: 8px; }.deck-hero-appbar b { color: #F7FAF7; font-family: var(--display); font-size: 16px; }.deck-hero-appbar span:nth-child(3) { justify-self: center; }.deck-hero-appbar span:last-child { justify-self: end; color: #B1E76E; }
.deck-hero-projectbar { min-height: 40px; padding: 0 14px; display: flex; align-items: center; gap: 38px; border-bottom: 1px solid rgba(177,231,110,.28); font: 700 8px/1 var(--mono); }.deck-hero-projectbar b { color: #F7FAF7; }
.deck-hero-workspace { height: calc(100% - 82px); display: grid; grid-template-columns: 205px minmax(0,1fr) 177px; }.deck-hero-slides,.deck-hero-properties { min-width: 0; background: #102F1F; }.deck-hero-slides { padding: 12px 9px; border-right: 1px solid rgba(177,231,110,.3); }.deck-hero-slides header,.deck-hero-properties header { min-height: 27px; display: flex; align-items: center; justify-content: space-between; font-size: 9px; }.deck-hero-slides > small { padding: 7px; display: flex; justify-content: space-between; border: 1px solid rgba(177,231,110,.28); font-size: 6px; }.deck-hero-slide-tools { padding: 9px 2px 7px; color: #F7FAF7; font-size: 6px; text-align: right; }
.deck-hero-slides figure { height: 77px; margin: 0 0 6px; position: relative; overflow: hidden; border: 1px solid rgba(177,231,110,.3); }.deck-hero-slides figure.is-active { border-color: #B1E76E; }.deck-hero-slides figure > span { position: absolute; top: 5px; left: 6px; z-index: 4; color: #F7FAF7; font-size: 7px; }.deck-hero-slides figure > i,.deck-hero-slides figure > img { width: 100%; height: 100%; display: block; object-fit: cover; opacity: .74; }.deck-hero-slides figure > b { max-width: 72%; position: absolute; left: 28px; bottom: 9px; z-index: 3; color: #B1E76E; font-family: var(--display); font-size: 13px; line-height: .83; text-transform: uppercase; }.deck-hero-assets { padding: 2px 0 6px; display: flex; gap: 8px; font-size: 7px; }.deck-hero-asset-tabs { display: flex; gap: 13px; align-items: center; font-size: 6px; }.deck-hero-asset-tabs b { padding: 5px; color: #B1E76E; border: 1px solid rgba(177,231,110,.3); border-radius: 50%; }.deck-hero-search { margin-top: 7px; padding: 8px; color: #F7FAF7; border: 1px solid rgba(177,231,110,.22); font-size: 6px; }.deck-hero-asset-thumbs { height: 42px; margin-top: 7px; display: grid; grid-template-columns: repeat(4,1fr); gap: 4px; }.deck-hero-asset-thumbs > * { min-width: 0; display: grid; place-items: center; overflow: hidden; color: #B1E76E; border: 1px solid rgba(177,231,110,.25); font-size: 17px; }
.deck-hero-main { min-width: 0; padding: 0 9px 10px; display: grid; grid-template-rows: 41px minmax(0,1fr) 112px; gap: 10px; }.deck-hero-toolbar { margin-inline: -9px; padding: 0 10px; display: grid; grid-template-columns: auto auto 1fr auto; gap: 10px; align-items: center; border-bottom: 1px solid rgba(177,231,110,.3); font-size: 7px; white-space: nowrap; }.deck-hero-toolbar small { color: #F7FAF7; opacity: .7; }.deck-hero-toolbar span:nth-child(3) { justify-self: center; }.deck-hero-toolbar b { color: #F7FAF7; font-size: 6px; }
.deck-hero-canvas { min-height: 0; position: relative; overflow: hidden; border: 1px solid rgba(177,231,110,.55); }.deck-hero-canvas > .deck-landscape-art { width: 100%; height: 100%; }.deck-hero-canvas > div:last-child { position: absolute; inset: 0; z-index: 3; padding: 20px; display: flex; flex-direction: column; color: #B1E76E; }.deck-hero-canvas small { font: 700 6px/1 var(--mono); text-transform: uppercase; }.deck-hero-canvas strong { margin-top: auto; font-family: var(--display); font-size: clamp(37px,3.25vw,56px); line-height: .82; text-transform: uppercase; }.deck-hero-canvas span { margin-top: auto; padding-top: 8px; border-top: 1px solid rgba(177,231,110,.6); font: 700 6px/1 var(--mono); text-transform: uppercase; }
.deck-hero-prompt { padding: 16px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid rgba(177,231,110,.3); border-radius: 18px; }.deck-hero-prompt p { margin: 0; font-size: 13px; }.deck-hero-prompt > div { display: flex; align-items: center; gap: 10px; }.deck-hero-prompt > div span { flex: 1; font-size: 9px; }.deck-hero-prompt b { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid rgba(177,231,110,.3); border-radius: 50%; }.deck-hero-prompt strong { width: 36px; height: 36px; display: grid; place-items: center; color: #102F1F; border-radius: 50%; background: #B1E76E; font-size: 20px; }
.deck-hero-properties { padding: 11px; border-left: 1px solid rgba(177,231,110,.3); font-size: 7px; }.deck-hero-properties p { margin: 12px 0 18px; }.deck-hero-properties .deck-prop-label { margin: 14px 0 7px; display: flex; justify-content: space-between; font-weight: 700; }.deck-hero-properties .deck-prop-label b { color: #B1E76E; }.deck-hero-properties small { margin: 7px 0 4px; display: block; font-size: 6px; opacity: .75; }.deck-hero-properties > i { min-height: 28px; padding: 0 8px; display: flex; align-items: center; justify-content: space-between; border: 1px solid rgba(177,231,110,.25); border-radius: 5px; color: #F7FAF7; font-style: normal; }.deck-hero-properties > i b { font-size: 6px; }
.deck-hero-app-shot { min-width: 0; width: 65%; grid-column: 2; grid-row: 1; margin: 0; align-self: center; justify-self: center; position: relative; overflow: hidden; border: 1px solid #B1E76E; border-radius: 14px; background: #102F1F; box-shadow: 0 24px 60px rgba(16,47,31,.75); }
.deck-hero-app-shot img { width: 100%; height: auto; display: block; object-fit: contain; }
.deck-hero-share b { font-size: 14px; }
.deck-hero-share .deck-share-icon { width: 20px; height: 20px; display: grid; place-items: center; }
.deck-share-icon svg,.deck-share-icon img { width: 20px; height: 20px; display: block; }
.deck-share-link-icon { fill: none; stroke: #B1E76E; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.deck-hero-share .deck-share-kwib-icon { padding: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; }
.deck-share-kwib-icon img { width: 100%; height: 100%; object-fit: contain; }
.deck-project { padding-block: 145px 155px; }
.deck-project-head { padding-bottom: 48px; display: grid; grid-template-columns: 1.05fr .78fr .9fr; gap: clamp(38px,5vw,90px); align-items: center; }.deck-project-head h2 { margin: 0; color: #B1E76E; font-family: var(--display); font-size: clamp(62px,6.7vw,112px); font-weight: 900; letter-spacing: -.055em; line-height: .83; text-transform: uppercase; }.deck-project-title-line { display: block; white-space: nowrap; }.deck-project-head > p { max-width: 490px; margin: 0; color: #F7FAF7; font: 400 clamp(17px,1.3vw,22px)/1.55 var(--mono); }.deck-project-head aside { min-height: 140px; padding: 27px 34px; display: flex; flex-direction: column; gap: 22px; justify-content: center; border: 1px solid #B1E76E; color: #F7FAF7; font-family: var(--mono); }.deck-project-head aside strong { padding-bottom: 15px; color: #B1E76E; border-bottom: 1px solid rgba(177,231,110,.45); font-size: 13px; text-transform: uppercase; }.deck-project-head aside span { font-size: 12px; line-height: 1.6; }
.deck-project-flow { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(15,minmax(0,1fr)); list-style: none; }.deck-project-flow li { min-width: 0; min-height: 116px; padding-right: 28px; }.deck-project-flow li:nth-child(1) { grid-column: 1/4; }.deck-project-flow li:nth-child(2) { grid-column: 4/7; }.deck-project-flow li:nth-child(3) { grid-column: 7/9; }.deck-project-flow li:nth-child(4) { grid-column: 9/13; }.deck-project-flow li:nth-child(5) { grid-column: 13/16; padding-right: 0; }.deck-project-flow li > div { display: grid; grid-template-columns: auto auto 1fr; gap: 8px; align-items: center; color: #B1E76E; }.deck-project-flow span,.deck-project-flow h3 { margin: 0; font: 700 17px/1 var(--mono); text-transform: uppercase; }.deck-project-flow i { height: 1px; position: relative; display: block; background: #B1E76E; }.deck-project-flow i::after { content: ""; width: 8px; height: 8px; position: absolute; top: -4px; right: 0; border: 1px solid #B1E76E; background: #102F1F; }.deck-project-flow li:last-child i { display: none; }.deck-project-flow p { max-width: 235px; margin: 17px 0 0; color: #F7FAF7; font: 400 12px/1.45 var(--mono); }
.deck-project-board { display: grid; grid-template-columns: repeat(15,minmax(0,1fr)); gap: 0; align-items: stretch; }.deck-project-panel { min-width: 0; min-height: 380px; padding: 15px; border: 1px solid rgba(177,231,110,.68); background: #102F1F; }.deck-project-panel + .deck-project-panel { border-left: 0; }.deck-project-panel h3 { margin: 0 0 14px; color: #B1E76E; font: 700 12px/1 var(--mono); text-transform: uppercase; }.deck-project-panel h4 { margin: 16px 0 9px; color: #B1E76E; font: 700 9px/1 var(--mono); text-transform: uppercase; }
.deck-project-assets { grid-column: 1/4; }.deck-project-sources { grid-column: 4/7; }.deck-project-system { grid-column: 7/9; }.deck-project-stack { grid-column: 9/13; }.deck-project-customize { grid-column: 13/16; }
.deck-project-system { display: flex; flex-direction: column; }.deck-project-system h4:last-of-type { margin-top: auto; }
.deck-mode-grid { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; list-style: none; }.deck-mode-grid li { min-width: 0; min-height: 69px; padding: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; color: #B1E76E; border: 1px solid rgba(177,231,110,.15); font: 700 12px/1.15 var(--mono); text-align: center; text-transform: uppercase; }.deck-mode-grid svg { width: 22px; height: 22px; flex: 0 0 auto; fill: none; stroke: #B1E76E; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.deck-project-sources > ul,.deck-project-customize > ul { margin: 0; padding: 0; list-style: none; }.deck-project-sources li { min-height: 48px; margin-bottom: 5px; padding: 8px 10px; display: flex; gap: 10px; align-items: center; border: 1px solid rgba(177,231,110,.45); font-family: var(--mono); }.deck-source-type-icon { width: 18px; height: 18px; flex: 0 0 18px; object-fit: contain; color: #B1E76E; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }.deck-source-type-icon[src$="memory-foundation-logo.svg"] { filter: brightness(0) saturate(100%) invert(91%) sepia(25%) saturate(1204%) hue-rotate(35deg) brightness(95%) contrast(90%); }.deck-project-sources li > span { color: #B1E76E; font-size: 12px; font-weight: 700; line-height: 1; }.deck-project-sources li small { margin-top: 4px; display: block; color: #B1E76E; font-size: 7px; font-weight: 400; line-height: 1; opacity: 1; }
.deck-project-assets,.deck-project-sources { display: flex; flex-direction: column; }.deck-project-assets .deck-mode-grid { min-height: 0; flex: 1; grid-template-rows: repeat(4,minmax(0,1fr)); gap: min(16px,2vw); }.deck-project-sources > ul { min-height: 0; flex: 1; display: grid; grid-template-rows: repeat(5,minmax(0,1fr)); gap: min(16px,2vw); }.deck-project-sources li { min-height: 0; margin-bottom: 0; }
.deck-project-fonts { display: grid; grid-template-columns: 1fr 1fr; align-items: center; color: #B1E76E; }.deck-project-fonts strong { font-family: Georgia,serif; font-size: 46px; font-weight: 400; }.deck-project-fonts span { font: 700 7px/1.7 var(--mono); text-transform: uppercase; }.deck-project-swatches { display: grid; grid-template-columns: repeat(5,1fr); gap: 5px; }.deck-project-swatches i { aspect-ratio: 1; background: #B1E76E; border: 1px solid #B1E76E; }.deck-project-swatches i:nth-child(2) { opacity: .8; }.deck-project-swatches i:nth-child(3) { opacity: .62; }.deck-project-swatches i:nth-child(4) { opacity: .3; }.deck-project-swatches i:nth-child(5) { background: #F7FAF7; }.deck-project-grids { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; }.deck-project-grids i { height: 48px; border: 1px dashed #B1E76E; }.deck-project-grids i:nth-child(2) { background: linear-gradient(transparent 45%,#B1E76E 45% 48%,transparent 48%); }.deck-project-grids i:nth-child(3),.deck-project-grids i:nth-child(4) { background: repeating-linear-gradient(90deg,transparent 0 27%,#B1E76E 28% 30%); }.deck-project-components { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; }.deck-project-components i { aspect-ratio: 1; display: grid; place-items: center; color: #B1E76E; border: 1px solid rgba(177,231,110,.55); font: 400 17px/1 var(--mono); }
.deck-project-stack { min-height: 380px; margin-left: 16px; position: relative; overflow: visible; border: 0; }.deck-project-slide { width: 94%; height: 82%; position: absolute; padding: 9px; border: 1px solid rgba(177,231,110,.62); border-radius: 16px; background: #102F1F; box-shadow: 0 14px 30px rgba(16,47,31,.85); color: #F7FAF7; }.deck-project-slide > span { font: 700 6px/1 var(--mono); }.deck-project-slide.is-back { top: 0; left: 0; }.deck-project-slide.is-middle { top: 24px; left: 5%; }.deck-project-slide.is-front { top: 48px; left: 10%; z-index: 2; }.deck-project-slide-art { height: 150px; margin-top: 10px; display: grid; grid-template-columns: 1fr 1.05fr; overflow: hidden; }.deck-project-slide-art > div { z-index: 2; padding: 12px; display: flex; flex-direction: column; justify-content: space-between; }.deck-project-slide-art strong { color: #B1E76E; font-family: var(--display); font-size: clamp(25px,2.2vw,38px); line-height: .84; text-transform: uppercase; }.deck-project-slide-art small { font: 700 5px/1 var(--mono); }.deck-project-slide-art > i { height: 100%; }.deck-project-slide.is-front > ul { margin: 7px 0; padding: 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; list-style: none; }.deck-project-slide.is-front li { min-height: 63px; padding: 7px; color: #F7FAF7; border: 1px solid rgba(177,231,110,.38); font: 400 6px/1.45 var(--mono); }.deck-project-slide.is-front li b { margin-bottom: 6px; display: block; color: #B1E76E; font-size: 6px; text-transform: uppercase; }.deck-project-slide footer { padding-top: 6px; color: #F7FAF7; border-top: 1px solid rgba(177,231,110,.45); font: 700 5px/1 var(--mono); text-transform: uppercase; }.deck-project-slide footer i { width: 45px; height: 7px; margin-right: 7px; display: inline-block; vertical-align: middle; background: repeating-linear-gradient(90deg,#B1E76E 0 2px,transparent 2px 4px); }
.deck-project-customize { display: flex; flex-direction: column; }.deck-project-customize > ul { min-height: 0; flex: 1; margin-bottom: 0; display: grid; grid-template-rows: repeat(5,minmax(0,1fr)); gap: 5px; }.deck-project-customize > ul > li { min-height: 0; margin-bottom: 0; padding: 7px 10px; display: grid; grid-template-columns: 28px 1fr; align-items: center; color: #B1E76E; border: 1px solid rgba(177,231,110,.45); font: 700 9px/1 var(--mono); }.deck-project-customize > ul > li > svg { width: 20px; height: 20px; color: #B1E76E; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: color .2s ease; }
.deck-edit-orbit {
  --orbit-x: 50vw;
  --orbit-y: 50vh;
  width: 0;
  height: 0;
  position: fixed;
  z-index: 80;
  top: var(--orbit-y);
  left: var(--orbit-x);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.deck-edit-orbit::before {
  content: "";
  width: 210px;
  height: 210px;
  position: absolute;
  top: 0;
  left: 0;
  border: 1px dashed rgba(177,231,110,.66);
  border-radius: 50%;
  background: radial-gradient(circle,rgba(177,231,110,.1),rgba(16,47,31,.03) 44%,transparent 45%);
  transform: translate(-50%,-50%);
}
.deck-edit-orbit-cursor {
  width: 13px;
  height: 13px;
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  border: 2px solid #102F1F;
  border-radius: 50%;
  background: #B1E76E;
  box-shadow: 0 0 0 5px rgba(177,231,110,.2),0 0 18px rgba(177,231,110,.7);
  transform: translate(-50%,-50%);
}
.deck-edit-example {
  width: 270px;
  min-height: 190px;
  padding: 18px;
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  visibility: hidden;
  overflow: hidden;
  color: #B1E76E;
  border: 1px solid #B1E76E;
  border-radius: 16px;
  background: #102F1F;
  box-shadow: 0 20px 48px rgba(4,22,13,.72),inset 0 0 0 1px rgba(177,231,110,.08);
  opacity: 0;
  transform: translate(-50%,-50%) scale(.88);
  transition: opacity .18s ease,transform .28s cubic-bezier(.2,.8,.2,1),visibility 0s linear .18s;
}
.deck-edit-example h4 { margin: 0 0 6px; color: #B1E76E; font: 800 17px/1 var(--mono); text-transform: uppercase; }
.deck-edit-example > p { margin: 0; color: #F7FAF7; font: 700 7px/1.4 var(--mono); }
.deck-edit-example.is-active { visibility: visible; opacity: 1; transition-delay: 0s; }
.deck-edit-orbit.is-visible { opacity: 1; }
.deck-edit-orbit[data-position="0"] .deck-edit-example.is-active { transform: translate(-50%,calc(-100% - 24px)) scale(1); }
.deck-edit-orbit[data-position="1"] .deck-edit-example.is-active { transform: translate(24px,calc(-100% + 35px)) scale(1); }
.deck-edit-orbit[data-position="2"] .deck-edit-example.is-active { transform: translate(24px,-35px) scale(1); }
.deck-edit-orbit[data-position="3"] .deck-edit-example.is-active { transform: translate(-50%,24px) scale(1); }
.deck-edit-orbit[data-position="4"] .deck-edit-example.is-active { transform: translate(calc(-100% - 24px),-35px) scale(1); }

.deck-example-text-preview { min-height: 118px; margin-top: 14px; padding: 13px; display: grid; grid-template-columns: 1.2fr .8fr; gap: 13px; border: 1px solid rgba(177,231,110,.55); }.deck-example-text-preview strong { align-self: center; color: #B1E76E; font-family: var(--display); font-size: 30px; line-height: .84; text-transform: uppercase; }.deck-example-text-preview span { display: grid; align-content: center; gap: 10px; }.deck-example-text-preview i { height: 5px; display: block; background: #B1E76E; }.deck-example-text-preview i:nth-child(2) { width: 78%; }.deck-example-text-preview i:nth-child(3) { width: 52%; }
.deck-example-image-preview { min-height: 118px; margin-top: 14px; display: grid; grid-template-columns: 1fr 62px; gap: 8px; }.deck-example-image-preview > i { min-height: 118px; border: 1px solid #B1E76E; }.deck-example-image-preview > span { display: grid; gap: 6px; }.deck-example-image-preview b { display: grid; place-items: center; color: #F7FAF7; border: 1px solid rgba(177,231,110,.55); font: 700 6px/1 var(--mono); text-transform: uppercase; }
.deck-example-shape-preview { min-height: 84px; margin-top: 15px; display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; align-items: center; }.deck-example-shape-preview i { aspect-ratio: 1; border: 2px solid #B1E76E; }.deck-example-shape-preview i:first-child { border-radius: 50%; background: rgba(177,231,110,.2); }.deck-example-shape-preview i:nth-child(3) { border-radius: 50% 0 0 50%; }.deck-example-shape-preview i:last-child { border-style: dashed; transform: rotate(45deg) scale(.72); }.deck-example-shape-actions { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }.deck-example-shape-actions span { padding: 7px 3px; color: #F7FAF7; border: 1px solid rgba(177,231,110,.55); font: 700 6px/1 var(--mono); text-align: center; text-transform: uppercase; }

.deck-example-layer { height: 78px; margin-top: 14px; display: grid; grid-template-columns: .68fr 1.32fr; gap: 9px; }
.deck-example-layer > b { display: grid; place-items: center; border: 1px dashed #B1E76E; font-family: var(--display); font-size: 38px; }
.deck-example-layer > .deck-landscape-art { width: 100%; height: 100%; border: 1px solid #B1E76E; }
.deck-example-tools { margin-top: 8px; display: grid; grid-template-columns: repeat(5,1fr); gap: 6px; }
.deck-example-tools i { min-height: 25px; display: grid; place-items: center; border: 1px solid rgba(177,231,110,.55); font: 400 10px/1 var(--mono); }

.deck-example-layout { height: 116px; margin-top: 16px; display: grid; grid-template-columns: 1.25fr 1fr; gap: 10px; }
.deck-example-layout i { position: relative; border: 1px solid #B1E76E; }
.deck-example-layout i:first-child::before { content: ""; position: absolute; inset: 9px 8px 56%; border: 1px dashed #B1E76E; }
.deck-example-layout i:first-child::after { content: ""; position: absolute; inset: 51% 8px 9px; border: 1px dashed #B1E76E; background: linear-gradient(90deg,transparent 61%,#B1E76E 61% 62%,transparent 62%); }
.deck-example-layout i:last-child { background: repeating-linear-gradient(90deg,transparent 0 18%,rgba(177,231,110,.6) 18% 19%); }

.deck-example-sources { min-height: 118px; margin-top: 13px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 10px; align-items: center; }
.deck-example-sources ul { margin: 0; padding: 0; list-style: none; }
.deck-example-sources li { margin-bottom: 6px; padding: 7px; color: #F7FAF7; border: 1px solid rgba(177,231,110,.55); font: 700 7px/1 var(--mono); }
.deck-example-sources svg { width: 100%; color: #B1E76E; }

.deck-example-easing { margin-top: 13px; display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }
.deck-example-easing i { padding: 6px 2px; color: #F7FAF7; border: 1px solid rgba(177,231,110,.55); font: 700 6px/1 var(--mono); text-align: center; }
.deck-example-curve { width: 100%; margin-top: 10px; color: #B1E76E; }

.deck-example-sizes { margin-top: 17px; display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; }
.deck-example-sizes i { min-height: 92px; padding: 8px 5px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; border: 1px solid rgba(177,231,110,.5); }
.deck-example-sizes b { display: block; border: 2px solid #B1E76E; }
.deck-example-sizes i:nth-child(1) b { width: 42px; aspect-ratio: 16/9; }
.deck-example-sizes i:nth-child(2) b { width: 35px; aspect-ratio: 4/3; }
.deck-example-sizes i:nth-child(3) b { width: 29px; aspect-ratio: 1; }
.deck-example-sizes i:nth-child(4) b { width: 18px; aspect-ratio: 9/16; }
.deck-example-sizes small { color: #F7FAF7; font: 700 6px/1 var(--mono); }

.deck-example-checks { margin: 14px 0 0; padding: 0; border: 1px solid rgba(177,231,110,.5); list-style: none; }
.deck-example-checks li { min-height: 36px; padding: 0 8px; display: grid; grid-template-columns: 18px 1fr auto; align-items: center; color: #F7FAF7; border-bottom: 1px solid rgba(177,231,110,.35); font: 700 7px/1 var(--mono); }
.deck-example-checks li:last-child { border-bottom: 0; }
.deck-example-checks span { width: 13px; height: 13px; display: grid; place-items: center; color: #B1E76E; border: 1px solid #B1E76E; border-radius: 50%; }
.deck-example-checks b { color: #F7FAF7; font-size: 6px; font-weight: 400; opacity: .72; }
.deck-project-flow li:nth-child(4),.deck-project-customize { grid-column: 9/12; }.deck-project-flow li:nth-child(5),.deck-project-stack { grid-column: 12/16; }.deck-project-customize { order: 4; }.deck-project-stack { order: 5; }
.deck-features { padding-bottom: 150px; }
.deck-feature-grid { display: grid; grid-template-columns: repeat(28,minmax(0,1fr)); border-top: 1px solid rgba(177,231,110,.55); border-left: 1px solid rgba(177,231,110,.55); }
.deck-feature-grid > * { min-width: 0; overflow: hidden; border-right: 1px solid rgba(177,231,110,.3); border-bottom: 1px solid rgba(177,231,110,.3); }
.deck-feature-statement { grid-column: 1/8; grid-row: 1; min-height: 620px; padding: clamp(20px,2vw,34px); display: flex; flex-direction: column; background: #102F1F; }
.deck-feature-mast { min-height: 31px; display: grid; grid-template-columns: 1fr auto auto; gap: 22px; align-items: start; color: #B1E76E; border-bottom: 1px solid rgba(177,231,110,.4); font: 700 8px/1 var(--mono); text-transform: uppercase; }.deck-feature-mast b { font-family: var(--display); font-size: 23px; text-transform: none; }
.deck-feature-statement h2 { margin: auto 0 24px; padding-block: 6px; color: #B1E76E; font-size: clamp(32px,2.9vw,48px); line-height: .92; }
.deck-feature-statement > p { margin: 0; color: #F7FAF7; font: 700 11px/1.5 var(--mono); }

.deck-feature-editor { grid-column: 8/23; grid-row: 1; min-height: 620px; display: flex; flex-direction: column; background: #102F1F; }
.deck-editor-chrome { min-height: 42px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; color: #F7FAF7; border-bottom: 1px solid rgba(177,231,110,.3); font: 700 9px/1 var(--mono); text-transform: uppercase; }
.deck-editor-body { min-height: 0; flex: 1; display: grid; grid-template-columns: 132px minmax(0,1fr) 138px; }
.deck-editor-slides { min-width: 0; padding: 10px; border-right: 1px solid rgba(177,231,110,.3); color: #F7FAF7; font: 700 8px/1.25 var(--mono); }.deck-editor-slides > div:first-child,.deck-editor-assets { display: flex; justify-content: space-between; }.deck-editor-slides > small { margin: 7px 0 10px; display: block; color: #F7FAF7; font-size: 6px; opacity: .72; }.deck-editor-slides figure { height: 66px; margin: 0 0 7px; position: relative; overflow: hidden; border: 1px solid rgba(177,231,110,.25); }.deck-editor-slides figure.is-active { border-color: #B1E76E; }.deck-editor-slides figure > span { position: absolute; top: 4px; left: 5px; z-index: 2; color: #F7FAF7; font-size: 7px; }.deck-editor-slides figure img { width: 100%; height: 100%; object-fit: cover; opacity: .78; }.deck-editor-slides figure > .deck-landscape-art { width: 100%; height: 100%; display: block; }.deck-editor-assets { margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(177,231,110,.25); }.deck-asset-tabs { margin-top: 9px; gap: 7px; align-items: center; }.deck-asset-tabs b { padding: 5px; border: 1px solid #B1E76E; color: #B1E76E; }
.deck-editor-main { min-width: 0; padding: 10px; display: grid; grid-template-rows: minmax(0,1.55fr) minmax(190px,.8fr); gap: 8px; }
.deck-main-canvas { min-height: 0; position: relative; overflow: hidden; border: 1px solid rgba(177,231,110,.4); }.deck-main-canvas > .deck-landscape-art { width: 100%; height: 100%; }.deck-main-canvas > div:last-child { position: absolute; inset: 0; z-index: 2; padding: 18px; display: flex; flex-direction: column; align-items: flex-start; color: #B1E76E; }.deck-main-canvas small { font: 700 6px/1 var(--mono); text-transform: uppercase; }.deck-main-canvas strong { margin-top: auto; font-family: var(--display); font-size: clamp(35px,3.2vw,58px); line-height: .84; text-transform: uppercase; }.deck-main-canvas div > span { margin-top: auto; padding-top: 8px; border-top: 1px solid rgba(177,231,110,.6); font: 700 6px/1 var(--mono); text-transform: uppercase; }
.deck-landscape-art { position: relative; overflow: hidden; background: radial-gradient(circle at 73% 43%,#B1E76E 0 16%,rgba(177,231,110,.5) 16.3% 17.5%,transparent 18%),#102F1F; }.deck-landscape-art::before { content: ""; position: absolute; inset: 48% -15% -18%; opacity: .8; background: repeating-linear-gradient(17deg,transparent 0 15px,rgba(177,231,110,.42) 16px 17px),repeating-linear-gradient(163deg,transparent 0 15px,rgba(177,231,110,.34) 16px 17px); transform: perspective(180px) rotateX(36deg) scale(1.25); transform-origin: center bottom; }.deck-landscape-art::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(178deg,transparent 0 28%,rgba(16,47,31,.25) 29% 44%,transparent 45%),linear-gradient(2deg,rgba(16,47,31,.9),transparent 55%); clip-path: polygon(0 48%,12% 29%,23% 47%,35% 18%,48% 49%,62% 26%,73% 44%,86% 14%,100% 40%,100% 100%,0 100%); }
.deck-timeline { min-height: 0; position: relative; padding: 8px; overflow: hidden; border: 1px solid rgba(177,231,110,.3); color: #F7FAF7; }.deck-timeline-head { height: 31px; margin-bottom: 7px; display: flex; align-items: flex-start; justify-content: space-between; border-bottom: 1px solid rgba(177,231,110,.25); font: 700 6px/1 var(--mono); }.deck-track { height: 25px; display: grid; grid-template-columns: 45px 1fr 1fr; gap: 3px; align-items: center; }.deck-track b { font: 700 7px/1 var(--mono); }.deck-track i { height: 12px; display: block; background: rgba(177,231,110,.34); border-right: 1px solid #B1E76E; }.deck-track i:last-child { opacity: .5; }.deck-track:nth-of-type(3) i:first-of-type { margin-left: 18%; }.deck-track:nth-of-type(4) i:first-of-type { margin-left: 34%; }.deck-track:nth-of-type(5) i:first-of-type { margin-left: 10%; }.deck-playhead { width: 1px; position: absolute; top: 35px; bottom: 7px; left: 47%; background: #F7FAF7; }.deck-playhead::before,.deck-playhead::after { content: ""; width: 6px; height: 6px; position: absolute; left: -3px; border-radius: 50%; background: #F7FAF7; }.deck-playhead::before { top: 0; }.deck-playhead::after { bottom: 0; }
.deck-properties { min-width: 0; padding: 11px; display: flex; flex-direction: column; gap: 8px; border-left: 1px solid rgba(177,231,110,.3); color: #F7FAF7; font: 700 7px/1.3 var(--mono); }.deck-properties > b { padding-bottom: 9px; border-bottom: 1px solid rgba(177,231,110,.25); }.deck-properties > span { margin-top: 3px; }.deck-properties small { margin-top: 2px; color: #F7FAF7; font-size: 6px; }.deck-properties i,.deck-properties em { min-height: 25px; padding: 8px 6px; overflow: hidden; color: #F7FAF7; border: 1px solid rgba(177,231,110,.22); font-style: normal; white-space: nowrap; }.deck-properties em { color: #B1E76E; }

.deck-feature-tools { grid-column: 23/29; grid-row: 1; min-height: 620px; display: grid; grid-template-rows: 1fr 1fr; }.deck-feature-tools > article { min-height: 0; padding: 22px; }.deck-feature-tools > article:first-child { border-bottom: 1px solid rgba(177,231,110,.3); }.deck-feature-tools h3,.deck-board-panel h3 { margin: 0 0 7px; color: #B1E76E; font: 700 20px/.95 var(--mono); letter-spacing: .02em; text-transform: uppercase; }.deck-feature-tools p,.deck-board-panel > p { margin: 0; color: #F7FAF7; font: 400 9px/1.45 var(--mono); }
.deck-layer-art { height: 120px; margin-top: 20px; display: grid; grid-template-columns: .75fr 1.55fr; gap: 12px; }.deck-layer-art b { display: grid; place-items: center; color: #B1E76E; border: 1px dashed #B1E76E; font-family: var(--display); font-size: 58px; }.deck-layer-art > .deck-landscape-art { width: 100%; height: 100%; border: 1px solid #B1E76E; }.deck-tool-glyphs { margin-top: 15px; display: grid; grid-template-columns: repeat(6,1fr); gap: 7px; }.deck-tool-glyphs b { aspect-ratio: 1; display: grid; place-items: center; border: 1px solid rgba(177,231,110,.55); color: #B1E76E; font: 400 16px/1 var(--mono); }
.deck-layout-glyphs { height: 130px; margin-top: 19px; display: grid; grid-template-columns: 1.25fr 1fr; gap: 10px; }.deck-layout-glyphs i { position: relative; display: block; border: 1px solid #B1E76E; }.deck-layout-glyphs i:first-child::before { content: ""; position: absolute; inset: 10px 9px 55%; border: 1px dashed #B1E76E; }.deck-layout-glyphs i:first-child::after { content: ""; position: absolute; inset: 52% 9px 10px; border: 1px dashed #B1E76E; background: linear-gradient(90deg,transparent 61%,#B1E76E 61% 62%,transparent 62%); }.deck-layout-glyphs i:last-child { background: repeating-linear-gradient(90deg,transparent 0 15%,rgba(177,231,110,.5) 15% 16%); }

.deck-board-panel { min-height: 310px; padding: 20px; color: #B1E76E; background: #102F1F; }.deck-context-panel { grid-column: 1/9; }.deck-system-panel { grid-column: 9/13; }.deck-sources-panel { grid-column: 13/18; }.deck-motion-panel { grid-column: 18/22; }.deck-sizes-panel { grid-column: 22/25; }.deck-checks-panel { grid-column: 25/29; }
.deck-context-graphic { min-height: 205px; margin-top: 14px; display: grid; grid-template-columns: 1fr 55px 85px; gap: 14px; align-items: center; position: relative; }.deck-context-graphic::before { content: ""; position: absolute; left: 39%; right: 20%; top: 50%; border-top: 1px dashed #B1E76E; }.deck-context-graphic ul { margin: 0; padding: 0; list-style: none; }.deck-context-graphic li { margin-bottom: 6px; padding: 8px; color: #F7FAF7; border: 1px solid rgba(177,231,110,.45); font: 700 7px/1 var(--mono); }.deck-context-graphic > b { aspect-ratio: 1; z-index: 1; display: grid; place-items: center; border: 4px solid #B1E76E; border-radius: 14px; background: #102F1F; font-family: var(--display); font-size: 31px; }.deck-context-graphic > div { display: grid; gap: 5px; }.deck-context-graphic img { width: 100%; height: 57px; object-fit: cover; border: 1px solid #B1E76E; }
.deck-system-graphic { margin-top: 22px; display: grid; grid-template-columns: 1.25fr .45fr .9fr; gap: 10px; }.deck-system-graphic > div:first-child { display: flex; flex-direction: column; }.deck-system-graphic strong { color: #F7FAF7; font-family: Georgia,serif; font-size: 47px; font-weight: 400; }.deck-system-graphic span { margin-top: 5px; color: #F7FAF7; font: 700 7px/1 var(--mono); text-transform: uppercase; }.deck-token-stack,.deck-rule-stack { display: grid; gap: 6px; }.deck-token-stack i { min-height: 26px; border: 1px solid #B1E76E; background: #B1E76E; }.deck-token-stack i:nth-child(2) { opacity: .7; }.deck-token-stack i:nth-child(3) { opacity: .4; }.deck-token-stack i:nth-child(4) { background: #F7FAF7; }.deck-rule-stack i { align-self: center; border-top: 2px solid #B1E76E; }.deck-rule-stack i:nth-child(2) { border-style: dashed; }.deck-rule-stack i:nth-child(3) { border-width: 4px; }.deck-rule-stack i:nth-child(4) { width: 70%; }.deck-rule-stack i:nth-child(5) { width: 42%; border-style: dotted; }.deck-shape-row { margin-top: 17px; display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; }.deck-shape-row i { aspect-ratio: 1; border: 1px solid #B1E76E; }.deck-shape-row i:first-child { border-radius: 50%; }.deck-shape-row i:nth-child(3) { border-radius: 50% 0 0 50%; }.deck-shape-row i:last-child { border-style: dashed; }
.deck-source-graphic { min-height: 210px; margin-top: 14px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 9px; align-items: center; }.deck-source-graphic ul { margin: 0; padding: 0; list-style: none; }.deck-source-graphic li { margin-bottom: 6px; padding: 7px; display: flex; gap: 7px; align-items: center; color: #F7FAF7; border: 1px solid rgba(177,231,110,.45); font: 700 12px/1 var(--mono); }.deck-source-graphic li span { font-size: 7px; }.deck-source-graphic small { margin-top: 2px; display: block; color: #F7FAF7; font-size: 6px; opacity: .7; }.deck-source-graphic svg { width: 100%; height: auto; color: #B1E76E; }
.deck-easing { margin-top: 22px; display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; }.deck-easing span { padding: 7px 3px; border: 1px solid rgba(177,231,110,.45); color: #F7FAF7; font: 700 6px/1 var(--mono); text-align: center; }.deck-curve { width: 100%; margin-top: 15px; color: #B1E76E; }.deck-scrubber { height: 17px; position: relative; background: #B1E76E; }.deck-scrubber i { width: 2px; height: 27px; position: absolute; top: -5px; left: 43%; background: #F7FAF7; }.deck-scrubber i::before { content: ""; width: 8px; height: 8px; position: absolute; top: -2px; left: -3px; border-radius: 50%; background: #F7FAF7; }
.deck-size-grid { margin-top: 20px; display: grid; grid-template-columns: repeat(6,1fr); gap: 7px; color: #F7FAF7; font: 700 7px/1 var(--mono); text-align: center; }.deck-size-grid > i { min-height: 45px; grid-column: span 2; padding: 6px; display: grid; place-items: center; border: 1px solid rgba(177,231,110,.45); }.deck-size-grid > i b { display: block; border: 2px solid #B1E76E; }.deck-size-grid > i:nth-of-type(1) b { width: 34px; aspect-ratio: 16/9; }.deck-size-grid > i:nth-of-type(2) b { width: 29px; aspect-ratio: 4/3; }.deck-size-grid > i:nth-of-type(3) b { width: 24px; aspect-ratio: 1; }.deck-size-grid > span { grid-column: span 2; }.deck-size-grid > i:nth-of-type(4) { aspect-ratio: 9/16; }.deck-size-grid > i:nth-of-type(4) b { width: 14px; aspect-ratio: 9/16; }.deck-size-grid > .is-custom { grid-column: span 4; aspect-ratio: auto; color: #F7FAF7; border-style: dashed; font-style: normal; font-size: 20px; }.deck-size-grid > span:last-child { grid-column: span 4; }
.deck-checks-panel ul { margin: 18px 0 0; padding: 0; border: 1px solid rgba(177,231,110,.45); list-style: none; }.deck-checks-panel li { min-height: 36px; padding: 0 8px; display: grid; grid-template-columns: 20px 1fr auto; align-items: center; color: #F7FAF7; border-bottom: 1px solid rgba(177,231,110,.3); font: 700 7px/1 var(--mono); }.deck-checks-panel li:last-child { border-bottom: 0; }.deck-checks-panel li span { width: 14px; height: 14px; display: grid; place-items: center; color: #B1E76E; border: 1px solid #B1E76E; border-radius: 50%; }.deck-checks-panel li b { color: #F7FAF7; font-size: 6px; font-weight: 400; opacity: .75; }

/* Hover feedback for every Edit Everything control and feature section. */
.deck-project-customize > ul > li,
.deck-feature-editor,
.deck-feature-tools > article,
.deck-board-panel,
.deck-tool-glyphs b,
.deck-layout-glyphs i,
.deck-source-graphic li,
.deck-easing span,
.deck-size-grid > i,
.deck-checks-panel li {
  transition: color .2s ease,background-color .2s ease,border-color .2s ease,box-shadow .24s ease,transform .24s ease;
}
.deck-feature-tools > article,
.deck-board-panel { position: relative; background: #102F1F; }

@media (hover:hover) and (pointer:fine) {
  .deck-project-customize > ul > li:hover {
    color: #102F1F;
    border-color: #B1E76E;
    background: #B1E76E;
    box-shadow: 0 9px 22px rgba(4,22,13,.28);
    transform: translateX(4px);
  }
  .deck-project-customize > ul > li:hover > svg { color: #102F1F; }

  .deck-feature-editor:hover,
  .deck-feature-tools > article:hover,
  .deck-board-panel:hover {
    z-index: 2;
    background: #143B27;
    box-shadow: inset 0 0 0 1px #B1E76E,inset 5px 0 0 rgba(177,231,110,.18),0 16px 34px rgba(4,22,13,.3);
    transform: translateY(-4px);
  }
  .deck-feature-tools > article:hover h3,
  .deck-board-panel:hover h3 { color: #F7FAF7; }

  .deck-tool-glyphs b:hover,
  .deck-layout-glyphs i:hover,
  .deck-source-graphic li:hover,
  .deck-easing span:hover,
  .deck-size-grid > i:hover,
  .deck-checks-panel li:hover {
    color: #102F1F;
    border-color: #B1E76E;
    background: #B1E76E;
    box-shadow: 0 8px 18px rgba(4,22,13,.25);
    transform: translateY(-2px);
  }
  .deck-checks-panel li:hover span { color: #102F1F; border-color: #102F1F; }
  .deck-checks-panel li:hover b { color: #102F1F; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .deck-project-customize > ul > li,
  .deck-feature-editor,
  .deck-feature-tools > article,
  .deck-board-panel,
  .deck-tool-glyphs b,
  .deck-layout-glyphs i,
  .deck-source-graphic li,
  .deck-easing span,
  .deck-size-grid > i,
  .deck-checks-panel li,
  .deck-edit-orbit,
  .deck-edit-example { transition: none; }
}
.deck-delivery { padding: 34px 0 22px; display: grid; grid-template-columns: minmax(340px,430px) minmax(0,1fr); grid-template-rows: 1fr auto; column-gap: clamp(32px,3.3vw,56px); }
.deck-delivery-copy { min-width: 0; align-self: start; }.deck-delivery-copy h2 { margin: 0; color: #B1E76E; font-family: var(--display); font-size: clamp(68px,4.7vw,80px); font-weight: 900; letter-spacing: -.065em; line-height: .82; text-transform: uppercase; }.deck-delivery-copy h2 span { color: #B1E76E; }
.deck-delivery-copy > p { max-width: 390px; margin: 24px 0 22px; color: #F7FAF7; font: 400 16px/1.5 var(--mono); }.deck-delivery-copy code { color: #F7FAF7; font-family: inherit; }
.deck-delivery-copy ol { margin: 0; padding: 0; list-style: none; }.deck-delivery-copy li { min-height: 83px; padding: 8px 0; }.deck-delivery-copy li > div { max-width: 350px; }
.deck-delivery-copy h3 { margin: 2px 0 5px; color: #B1E76E; font: 700 17px/1 var(--mono); text-transform: uppercase; }.deck-delivery-copy li p { max-width: 310px; margin: 0; color: #F7FAF7; font: 400 11px/1.45 var(--mono); }
.deck-delivery-cta { width: 100%; max-width: 360px; min-height: 66px; margin-top: 17px; padding: 0 22px; display: flex; align-items: center; justify-content: space-between; color: #B1E76E; border: 2px solid #B1E76E; font: 700 16px/1 var(--mono); text-transform: uppercase; }.deck-delivery-cta span { font-size: 33px; font-weight: 400; }
.deck-delivery-stage { min-width: 0; min-height: 700px; position: relative; }
.deck-preview-window,.deck-browser-window { position: absolute; overflow: hidden; border: 1px solid rgba(177,231,110,.48); background: #102F1F; box-shadow: 0 20px 55px rgba(16,47,31,.92); }.deck-preview-window { width: 59%; top: 0; left: 0; }.deck-browser-window { width: 69%; top: 65px; right: 0; z-index: 2; }
.deck-product-bar { height: 29px; padding: 0 10px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: #F7FAF7; border-bottom: 1px solid rgba(177,231,110,.3); font: 700 7px/1 var(--mono); }.deck-product-bar > span:first-child { display: flex; gap: 5px; }.deck-product-bar > span:last-child { justify-self: end; }.deck-product-bar i { width: 7px; height: 7px; display: block; border: 1px solid #B1E76E; border-radius: 50%; background: #B1E76E; }.deck-product-bar i:nth-child(2) { opacity: .65; }.deck-product-bar i:nth-child(3) { opacity: .35; }
.deck-preview-body { min-height: 318px; display: grid; grid-template-columns: 116px 1fr; }.deck-preview-body aside { padding: 14px 10px; display: flex; flex-direction: column; gap: 8px; border-right: 1px solid rgba(177,231,110,.3); color: #F7FAF7; font: 400 7px/1.25 var(--mono); }.deck-preview-body aside > strong { font-size: 8px; }.deck-preview-body aside > span,.deck-preview-body aside > b { padding: 7px; border: 1px solid rgba(177,231,110,.28); }.deck-preview-body aside b { color: #B1E76E; font-size: 8px; }.deck-preview-body aside small { margin-top: 4px; display: block; color: #F7FAF7; font-size: 6px; font-weight: 400; }.deck-preview-canvas { min-width: 0; display: grid; grid-template-rows: 1fr 62px; }
.deck-presented-slide,.deck-browser-slide { position: relative; overflow: hidden; background: #102F1F; }.deck-presented-slide { margin: 12px; padding: 18px; border: 1px solid rgba(177,231,110,.35); }.deck-presented-slide::before,.deck-browser-slide::before { content: ""; width: 25%; aspect-ratio: 1; position: absolute; right: 12%; top: 27%; border-radius: 50%; background: #B1E76E; opacity: .82; }.deck-presented-slide::after,.deck-browser-slide::after { content: ""; position: absolute; left: -5%; right: -5%; bottom: 12%; height: 25%; border-top: 1px solid #B1E76E; border-bottom: 1px solid #B1E76E; transform: skewY(-7deg); opacity: .5; }.deck-presented-slide small,.deck-presented-slide strong,.deck-browser-slide small,.deck-browser-slide strong { position: relative; z-index: 1; }.deck-presented-slide small,.deck-browser-slide small { color: #B1E76E; font: 700 6px/1 var(--mono); text-transform: uppercase; }.deck-presented-slide strong { margin-top: 38px; display: block; color: #B1E76E; font-family: var(--display); font-size: clamp(27px,2.4vw,42px); line-height: .83; text-transform: uppercase; }
.deck-slide-strip { padding: 8px 12px; display: grid; grid-template-columns: repeat(6,1fr); gap: 6px; border-top: 1px solid rgba(177,231,110,.3); }.deck-slide-strip i { min-width: 0; position: relative; border: 1px solid rgba(177,231,110,.34); background: #102F1F; }.deck-slide-strip i::before { content: ""; width: 25%; aspect-ratio: 1; position: absolute; right: 14%; top: 16%; border-radius: 50%; background: #B1E76E; }.deck-slide-strip i::after { content: ""; width: 55%; position: absolute; left: 8%; bottom: 18%; border-top: 2px solid #B1E76E; box-shadow: 0 -5px 0 rgba(177,231,110,.65); }
.deck-preview-footer { height: 34px; padding: 0 10px; display: flex; align-items: center; justify-content: flex-end; gap: 12px; border-top: 1px solid rgba(177,231,110,.3); color: #F7FAF7; font: 700 7px/1 var(--mono); }.deck-preview-footer span:nth-last-child(-n+2),.deck-preview-footer b { padding: 6px 8px; border: 1px solid rgba(177,231,110,.3); }.deck-preview-footer b { color: #B1E76E; }
.deck-browser-address { height: 27px; padding: 9px 11px; color: #F7FAF7; border-bottom: 1px solid rgba(177,231,110,.3); font: 700 7px/1 var(--mono); }.deck-viewer-toolbar { min-height: 37px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; color: #F7FAF7; font: 700 7px/1 var(--mono); text-transform: uppercase; }.deck-viewer-toolbar b { padding: 7px 9px; color: #B1E76E; border: 1px solid rgba(177,231,110,.3); }
.deck-browser-slide { aspect-ratio: 16/8.55; margin-inline: 11px; padding: 22px; border: 1px solid rgba(177,231,110,.36); }.deck-browser-slide::before { width: 24%; right: 10%; top: 25%; }.deck-browser-slide strong { max-width: 70%; margin-top: 43px; display: block; color: #B1E76E; font-family: var(--display); font-size: clamp(38px,3.7vw,65px); line-height: .83; text-transform: uppercase; }.deck-viewer-controls { min-height: 42px; padding: 0 12px; display: flex; align-items: center; gap: 12px; color: #F7FAF7; font: 700 8px/1 var(--mono); }.deck-viewer-controls span:nth-last-child(-n+2) { padding: 6px 10px; border: 1px solid rgba(177,231,110,.3); }
.deck-share-panel { width: calc(96% - 62px); min-height: 137px; position: absolute; right: 62px; bottom: 18px; z-index: 3; padding: 12px; display: grid; grid-template-columns: .75fr .9fr 1.35fr max-content; grid-template-rows: 28px 1fr; gap: 7px; border: 1px solid rgba(177,231,110,.62); background: #102F1F; }.deck-share-title { grid-column: 1/-1; padding: 0!important; flex-direction: row!important; align-items: center; gap: 10px!important; border: 0!important; }.deck-share-title b { color: #B1E76E; font: 700 12px/1 var(--mono); text-transform: uppercase; }.deck-share-panel > div { min-width: 0; padding: 9px; display: flex; flex-direction: column; gap: 8px; border: 1px solid rgba(177,231,110,.38); }.deck-share-panel span { color: #F7FAF7; font: 700 7px/1 var(--mono); text-transform: uppercase; }.deck-share-panel strong { overflow: hidden; color: #F7FAF7; font: 700 8px/1 var(--mono); text-overflow: ellipsis; white-space: nowrap; }.deck-copy-field strong { padding-left: 7px; display: flex; align-items: center; justify-content: space-between; border: 1px solid rgba(177,231,110,.35); }.deck-copy-field strong b { padding: 9px; color: #102F1F; background: #B1E76E; text-transform: uppercase; }.deck-download-field { border-left: 2px solid #B1E76E!important; }.deck-download-field strong { width: fit-content; padding: 9px; color: #B1E76E; border: 1px solid #B1E76E; text-transform: uppercase; }
.deck-share-panel { padding-right: 8px; }.deck-download-field { padding-right: 8px!important; border-left: 1px solid rgba(177,231,110,.38)!important; }
.deck-closing { min-height: 650px; }.deck-closing h2 { margin: 0 0 45px; display: flex; flex-direction: column; gap: 16px; color: #B1E76E; font-family: var(--display); font-size: clamp(70px,9vw,150px); font-weight: 900; letter-spacing: 0; line-height: .82; text-transform: uppercase; }
.deck-closing .button-row { width: 100%; max-width: 460px; display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: 12px; }
.deck-closing .deck-marketplace-cta:hover { transform: translateY(-3px); }

@media (max-width: 1150px) {
  .deck-hero { grid-template-columns: 1fr; grid-template-rows: auto auto 48px; }.deck-hero-copy { min-height: 600px; grid-column: 1; grid-row: 1; max-width: 540px; }.deck-hero-app-shot { grid-column: 1; grid-row: 2; margin: 0 0 42px; }.deck-hero-meta { grid-row: 3; }
  .deck-project-head { grid-template-columns: 1.1fr .9fr; }.deck-project-head aside { grid-column: 1/-1; }.deck-project-flow { grid-template-columns: repeat(6,minmax(0,1fr)); }.deck-project-flow li:nth-child(n) { grid-column: span 2; padding-right: 18px; }.deck-project-flow li:nth-child(4),.deck-project-flow li:nth-child(5) { grid-column: span 3; }.deck-project-board { grid-template-columns: repeat(12,minmax(0,1fr)); }.deck-project-assets,.deck-project-sources { grid-column: span 4; }.deck-project-system { grid-column: span 4; }.deck-project-stack { grid-column: span 8; min-height: 430px; }.deck-project-customize { grid-column: span 4; }.deck-project-panel:nth-child(4) { border-left: 1px solid rgba(177,231,110,.68); }.deck-project-slide-art strong { font-size: clamp(30px,4.4vw,48px); }
  .deck-feature-grid { grid-template-columns: repeat(12,minmax(0,1fr)); }.deck-feature-statement { grid-column: 1/5; grid-row: auto; }.deck-feature-statement h2 { font-size: 35px; }.deck-feature-editor { grid-column: 5/13; grid-row: auto; }.deck-editor-body { grid-template-columns: 112px minmax(0,1fr); }.deck-properties { display: none; }.deck-feature-tools { min-height: 0; grid-column: 1/13; grid-row: auto; grid-template-columns: 1fr 1fr; grid-template-rows: auto; }.deck-feature-tools > article:first-child { border-right: 1px solid rgba(177,231,110,.3); border-bottom: 0; }.deck-context-panel { grid-column: span 6; }.deck-system-panel,.deck-sources-panel { grid-column: span 3; }.deck-motion-panel,.deck-sizes-panel,.deck-checks-panel { grid-column: span 4; }
  .deck-delivery { grid-template-columns: 1fr; }.deck-delivery-copy { max-width: 520px; }.deck-delivery-stage { min-height: 760px; margin-top: 48px; }.deck-preview-window { width: 62%; }.deck-browser-window { width: 72%; }
}

@media (max-width: 1150px) {
  .deck-hero { grid-template-rows: auto auto!important; }
  .deck-project-slide { width: 90%; }
}

@media (max-width: 700px) {
  .deck-hero { padding-top: 18px; grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto auto; }.deck-hero-copy { min-width: 0; min-height: 540px; padding: 35px 0 42px; }.deck-hero h1 { min-width: 0; font-size: clamp(58px,17vw,68px); }.deck-hero h1 .deck-hero-line { width: 138%; }.deck-hero-copy > p { margin: 26px 0 20px; font-size: 14px; }.deck-hero-share { max-width: none; }.deck-hero .button-row { max-width: none; }.deck-hero-app-shot { min-width: 0; width: 100%; margin-bottom: 34px; border-radius: 9px; }.deck-hero-meta { min-width: 0; padding: 17px 0; flex-direction: column; align-items: flex-start; gap: 11px; }.deck-hero-meta span:nth-child(2) { align-self: center; }.deck-hero-meta span:last-child { align-self: flex-end; }
  .deck-project { padding-block: 92px; }.deck-project-head { grid-template-columns: 1fr; gap: 28px; padding-bottom: 42px; }.deck-project-head h2 { font-size: clamp(40px,12.8vw,52px); }.deck-project-head > p { font-size: 15px; }.deck-project-head aside { grid-column: 1; min-height: 0; padding: 22px 18px; }.deck-project-flow { grid-template-columns: 1fr; }.deck-project-flow li:nth-child(n) { min-height: 0; grid-column: 1; padding: 17px 0; border-top: 1px solid rgba(177,231,110,.3); }.deck-project-flow li > div { grid-template-columns: 34px 105px 1fr; }.deck-project-flow li:last-child i { display: block; }.deck-project-flow p { max-width: none; margin: 9px 0 0 34px; }.deck-project-board { grid-template-columns: 1fr; }.deck-project-assets,.deck-project-sources,.deck-project-system,.deck-project-stack,.deck-project-customize { grid-column: 1; }.deck-project-panel { min-height: 0; padding: 20px; border-left: 1px solid rgba(177,231,110,.68)!important; border-top: 0; }.deck-project-assets { border-top: 1px solid rgba(177,231,110,.68); }.deck-project-stack { min-height: 390px; }.deck-project-slide { height: 315px; }.deck-project-slide.is-front { left: 7%; }.deck-project-slide-art { height: 144px; }.deck-project-slide-art strong { font-size: 29px; }.deck-project-customize > ul > li { min-height: 48px; }
  .deck-features { padding-bottom: 92px; }.deck-feature-grid { grid-template-columns: 1fr; }.deck-feature-statement,.deck-feature-editor,.deck-feature-tools,.deck-context-panel,.deck-system-panel,.deck-sources-panel,.deck-motion-panel,.deck-sizes-panel,.deck-checks-panel { grid-column: 1; grid-row: auto; }.deck-feature-statement { min-height: 500px; padding: 24px 20px; }.deck-feature-mast { gap: 12px; }.deck-feature-statement h2 { font-size: 40px; }.deck-feature-editor { min-height: 565px; }.deck-editor-chrome span:last-child { display: none; }.deck-editor-body { grid-template-columns: 88px minmax(0,1fr); }.deck-editor-slides { padding: 7px; }.deck-editor-slides figure { height: 54px; }.deck-editor-main { padding: 7px; grid-template-rows: minmax(0,1.25fr) minmax(210px,.9fr); }.deck-main-canvas > div:last-child { padding: 12px; }.deck-main-canvas strong { font-size: clamp(29px,9vw,39px); }.deck-timeline-head span:last-child { display: none; }.deck-track { grid-template-columns: 37px 1fr 1fr; }.deck-feature-tools { display: grid; grid-template-columns: 1fr; }.deck-feature-tools > article:first-child { border-right: 0; border-bottom: 1px solid rgba(177,231,110,.3); }.deck-feature-tools > article { padding: 24px 20px; }.deck-board-panel { min-height: 300px; padding: 24px 20px; }.deck-context-graphic { grid-template-columns: 1fr 52px 80px; gap: 9px; }.deck-system-graphic { grid-template-columns: 1.1fr .45fr .9fr; }.deck-source-graphic { grid-template-columns: 1fr .85fr; }
  .deck-delivery { padding-block: 28px 18px; gap: 0; }.deck-delivery-copy h2 { font-size: clamp(54px,15.2vw,60px); }.deck-delivery-copy > p { margin-block: 22px; font-size: 14px; }.deck-delivery-copy h3 { font-size: 15px; }.deck-delivery-cta { min-height: 58px; font-size: 13px; }.deck-delivery-stage { min-height: 0; margin-top: 48px; display: flex; flex-direction: column; }.deck-preview-window,.deck-browser-window { width: 100%; position: relative; inset: auto; }.deck-browser-window { margin: -17px 0 0 7px; }.deck-preview-body { min-height: 255px; grid-template-columns: 92px 1fr; }.deck-preview-canvas { grid-template-rows: 1fr 54px; }.deck-presented-slide { margin: 9px; padding: 14px; }.deck-presented-slide strong { margin-top: 28px; font-size: 29px; }.deck-browser-slide { padding: 15px; }.deck-browser-slide strong { margin-top: 27px; font-size: 36px; }.deck-share-panel { width: calc(100% - 7px); min-height: 0; position: relative; right: auto; bottom: auto; margin: 10px 0 0 7px; grid-template-columns: 1fr 1fr; grid-template-rows: auto; }.deck-share-title,.deck-copy-field,.deck-download-field { grid-column: 1/-1; }.deck-copy-field strong { font-size: 7px; }.deck-closing { min-height: 550px; }.deck-closing h2 { font-size: clamp(57px,17vw,73px); }
}

/* Deck hero / one file moving from the desktop editor into Chrome */
.deck-hero {
  min-height: calc(100dvh - 92px);
  padding: clamp(38px,5vh,62px) 0 clamp(58px,7vh,88px);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(330px,.68fr) minmax(0,1.42fr);
  grid-template-rows: auto;
  align-items: center;
  gap: clamp(42px,4.7vw,82px);
  overflow: visible;
}
.deck-hero::before {
  content: none;
  position: absolute;
  z-index: -1;
  top: 7%;
  right: 0;
  bottom: 2%;
  left: 34%;
  pointer-events: none;
  background:
    radial-gradient(circle at 46% 40%, rgba(177,231,110,.09), transparent 31%),
    linear-gradient(rgba(177,231,110,.035) 1px, transparent 1px),
    linear-gradient(90deg,rgba(177,231,110,.035) 1px, transparent 1px);
  background-size: auto, 42px 42px, 42px 42px;
  -webkit-mask-image: linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
  mask-image: linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
}
.deck-hero-copy {
  min-width: 0;
  grid-column: 1;
  grid-row: 1;
  padding: 0;
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.deck-hero h1 {
  width: auto;
  max-width: 540px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #B1E76E;
  font-family: var(--display);
  font-size: clamp(66px,5.45vw,94px);
  font-weight: 900;
  letter-spacing: -.064em;
  line-height: .82;
  text-transform: uppercase;
}
.deck-hero h1 .deck-hero-line {
  width: 132%;
  display: block;
  color: #B1E76E;
  font-size: 1em;
  letter-spacing: inherit;
  white-space: nowrap;
  transform: scaleX(.76);
  transform-origin: left center;
}
.deck-hero-copy > p {
  max-width: 44ch;
  margin: 28px 0 24px;
  color: #F7FAF7;
  font: 400 clamp(14px,1.02vw,17px)/1.58 var(--mono);
  text-wrap: pretty;
}
.deck-hero-share {
  width: 100%;
  max-width: 465px;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  border: 1px solid rgba(177,231,110,.62);
  border-radius: 16px;
  overflow: hidden;
  list-style: none;
  background: rgba(16,47,31,.58);
  backdrop-filter: blur(10px);
}
.deck-hero-share li { min-width: 0; min-height: 67px; padding: 10px 9px; gap: 9px; }
.deck-hero-share b { color: #F7FAF7; font: 700 9px/1.25 var(--mono); letter-spacing: .015em; text-transform: uppercase; }
.deck-hero .button-row {
  width: 100%;
  max-width: 460px;
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr);
  align-items: stretch;
  gap: 12px;
}
.deck-marketplace-cta {
  width: 100%;
  min-height: 44px;
  padding: 24px clamp(6px,.7vw,12px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(5px,.65vw,10px);
  border: 1px solid var(--lime);
  border-radius: 8px;
  color: var(--ink);
  background: var(--lime);
  font: 800 clamp(8.5px,.75vw,12px)/1 var(--mono);
  text-transform: uppercase;
  transition: color .2s ease,background-color .2s ease,transform .2s ease;
}
.deck-marketplace-cta-icon { display: inline-flex; align-items: center; flex: 0 0 auto; }
.deck-marketplace-chevron { width: clamp(14px,1.1vw,18px); height: clamp(14px,1.1vw,18px); fill: none; stroke: currentColor; stroke-width: 2.75; stroke-linecap: round; stroke-linejoin: round; }
.deck-marketplace-cta:hover { color: var(--lime); background: var(--ink); }
.deck-marketplace-cta:active { transform: scale(.985); }

.deck-hero-showcase {
  min-width: 0;
  min-height: 700px;
  grid-column: 2;
  grid-row: 1;
  position: relative;
  align-self: center;
  padding: 0 0 54px 20px;
}
.deck-hero-showcase::before {
  content: none;
  width: 78%;
  aspect-ratio: 1.25;
  position: absolute;
  top: 6%;
  left: 10%;
  z-index: -1;
  border: 1px solid rgba(177,231,110,.18);
  background: radial-gradient(circle,rgba(177,231,110,.13),transparent 67%);
  transform: rotate(-3deg);
}
.deck-hero-app-shot {
  min-width: 0;
  width: 92%;
  grid-column: auto;
  grid-row: auto;
  margin: 0;
  position: relative;
  justify-self: start;
  z-index: 1;
  overflow: hidden;
  border: 1px solid #B1E76E;
  border-radius: 16px;
  background: #102F1F;
  box-shadow: 0 30px 78px rgba(16,47,31,.94),0 0 0 1px rgba(177,231,110,.08) inset;
  transition: border-color .24s ease,transform .5s cubic-bezier(.22,.72,.16,1),box-shadow .5s ease;
}
.deck-hero-app-label {
  min-height: 38px;
  padding: 0 12px;
  display: grid;
  grid-template-columns: 18px auto 1fr;
  align-items: center;
  gap: 8px;
  color: #F7FAF7;
  border-bottom: 1px solid rgba(177,231,110,.35);
  background: #102F1F;
  font: 700 8px/1 var(--mono);
  text-transform: uppercase;
}
.deck-hero-app-label img { width: 17px; height: 17px; }
.deck-hero-app-label span { justify-self: end; color: #B1E76E; }
.deck-hero-app-shot > img { width: 100%; height: auto; display: block; object-fit: contain; }
.deck-hero-app-shot figcaption {
  min-height: 40px;
  padding: 0 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  color: #B1E76E;
  border-top: 1px solid rgba(177,231,110,.32);
  background: #102F1F;
  font: 700 7px/1 var(--mono);
  text-transform: uppercase;
}
.deck-hero-app-shot figcaption b { color: #F7FAF7; font-weight: 700; }

.deck-hero-preview-shot {
  width: min(44%,430px);
  margin: 0;
  position: absolute;
  z-index: 2;
  left: 10%;
  bottom: 26px;
  overflow: hidden;
  border: 2px solid rgba(177,231,110,.15);
  border-radius: 12px;
  color: #F7FAF7;
  background: #111214;
  box-shadow: -8px 24px 58px rgba(16,47,31,.96),0 0 0 1px rgba(177,231,110,.09) inset;
  transition: border-color .24s ease,transform .5s cubic-bezier(.22,.72,.16,1),box-shadow .5s ease;
}
.deck-hero-preview-body,
.deck-hero-chrome-body { position: relative; }
.deck-hero-chrome-body { aspect-ratio: 1280 / 650; overflow: hidden; }
.deck-hero-preview-body > img { width: 100%; height: auto; display: block; }
.deck-hero-synced-slide { position: absolute; z-index: 4; overflow: hidden; background: #102F1F; pointer-events: none; }
.deck-hero-synced-slide svg { width: 100%; height: 100%; display: block; }
.deck-hero-preview-synced-slide { width: 61.67%; height: 51.98%; top: 35.94%; left: 35.83%; border-radius: 5px; }
.deck-hero-preview-synced-thumbnail { width: 25.42%; height: 21.46%; top: 25.73%; left: 3.96%; border-radius: 3px; }
.deck-hero-chrome-synced-slide { width: 75.08%; height: 83.23%; top: 16.77%; left: 24.92%; }
.deck-hero-chrome-synced-thumbnail { width: 18.98%; height: 21.08%; top: 21.23%; left: 2.97%; border-radius: 3px; }

.deck-hero-chrome-shot {
  width: min(55%,540px);
  margin: 0;
  position: absolute;
  z-index: 3;
  right: -10px;
  bottom: -62px;
  overflow: hidden;
  border: 2px solid rgba(177,231,110,.15);
  border-radius: 12px;
  color: #F7FAF7;
  background: #102F1F;
  box-shadow: -18px 24px 62px rgba(16,47,31,.98),0 0 0 1px rgba(177,231,110,.1) inset;
  transition: border-color .24s ease,transform .5s cubic-bezier(.22,.72,.16,1),box-shadow .5s ease;
}
.deck-hero-preview-label,
.deck-hero-chrome-label,
.deck-hero-chrome-shot figcaption {
  min-height: 32px;
  padding: 0 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid rgba(177,231,110,.28);
  font: 700 7px/1 var(--mono);
  letter-spacing: .015em;
  text-transform: uppercase;
}
.deck-hero-preview-label { background: #102F1F; }
.deck-hero-preview-label span,
.deck-hero-chrome-label span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #F7FAF7;
}
.deck-hero-preview-label img,
.deck-hero-chrome-label img {
  width: 16px;
  height: 16px;
}
.deck-hero-preview-label b,
.deck-hero-chrome-label b,
.deck-hero-chrome-shot figcaption span {
  color: #B1E76E;
}
.deck-hero-app-shot,
.deck-hero-preview-shot,
.deck-hero-chrome-shot {
  border-width: 4px;
  border-color: var(--ink);
}
.deck-hero-app-label,
.deck-hero-preview-label,
.deck-hero-chrome-label {
  position: absolute;
  z-index: 8;
  top: 0;
  right: 0;
  left: 0;
  visibility: hidden;
  opacity: 0;
  background: rgba(16,47,31,.96);
  backdrop-filter: blur(10px);
  transform: translateY(-8px);
  transition: opacity .2s ease,transform .24s ease,visibility 0s linear .24s;
}
.deck-hero-chrome-image {
  width: 100%;
  height: auto;
  display: block;
  border: 0;
  background: #111214;
}
.deck-hero-chrome-shot figcaption {
  border-top: 1px solid rgba(177,231,110,.28);
  border-bottom: 0;
  color: #F7FAF7;
  background: #102F1F;
  font-size: 6px;
}
.deck-hero-chrome-shot figcaption b { color: #F7FAF7; }
.deck-hero-format-bridge {
  width: 50%;
  min-height: 42px;
  padding: 0 10px;
  position: absolute;
  z-index: 4;
  left: 0;
  bottom: 5px;
  display: grid;
  grid-template-columns: auto minmax(14px,1fr) auto minmax(14px,1fr) auto;
  align-items: center;
  gap: 8px;
  color: #B1E76E;
  border: 1px solid rgba(177,231,110,.5);
  background: rgba(16,47,31,.9);
  backdrop-filter: blur(12px);
  font: 700 6px/1 var(--mono);
  text-transform: uppercase;
}
.deck-hero-format-bridge span { min-width: 0; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.deck-hero-format-bridge img { width: 13px; height: 13px; }
.deck-hero-format-bridge i { height: 1px; display: block; background: rgba(177,231,110,.48); }
.deck-hero-format-bridge b { padding: 5px 6px; color: #102F1F; background: #B1E76E; font-weight: 700; }

@media (hover:hover) and (pointer:fine) {
  .deck-hero-app-shot:hover { border-color: #B1E76E; transform: translate(-4px,-5px); box-shadow: 0 38px 90px rgba(16,47,31,.98),0 0 0 1px rgba(177,231,110,.12) inset; }
  .deck-hero-preview-shot:hover { border-color: #B1E76E; transform: translate(-2px,-6px); box-shadow: -12px 30px 68px rgba(16,47,31,1),0 0 0 1px rgba(177,231,110,.12) inset; }
  .deck-hero-chrome-shot:hover { border-color: #B1E76E; transform: translate(5px,-7px); box-shadow: -22px 30px 72px rgba(16,47,31,1),0 0 0 1px rgba(177,231,110,.14) inset; }
  .deck-hero-app-shot:hover .deck-hero-app-label,
  .deck-hero-preview-shot:hover .deck-hero-preview-label,
  .deck-hero-chrome-shot:hover .deck-hero-chrome-label {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s;
  }
}

@media (max-width: 1150px) {
  .deck-hero { min-height: 0; padding: 58px 0 100px; grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto; gap: 54px; }
  .deck-hero::before { top: 34%; left: -4%; }
  .deck-hero-copy { max-width: 680px; min-height: 0; grid-column: 1; grid-row: 1; }
  .deck-hero h1 { max-width: 650px; font-size: clamp(76px,9vw,104px); }
  .deck-hero-showcase { width: 100%; min-height: 720px; grid-column: 1; grid-row: 2; padding-left: 0; }
  .deck-hero-app-shot { width: 91%; }
  .deck-hero-preview-shot { width: min(44%,430px); }
  .deck-hero-chrome-shot { width: min(55%,540px); }
  .deck-marketplace-cta { padding-inline: 14px; gap: 10px; font-size: 12px; }
  .deck-marketplace-chevron { width: 18px; height: 18px; }
}

@media (max-width: 700px) {
  .deck-hero { padding: 24px 0 72px; display: grid; gap: 42px; overflow: hidden; }
  .deck-hero::before { top: 48%; right: -30%; left: -30%; }
  .deck-hero-copy { min-width: 0; min-height: 0; padding: 20px 0 0; }
  .deck-hero h1 { max-width: 100%; font-size: clamp(55px,16.7vw,70px); }
  .deck-hero h1 .deck-hero-line { width: 100%; white-space: normal; transform: none; }
  .deck-hero-copy > p { margin: 24px 0 20px; font-size: 14px; }
  .deck-hero-share { max-width: none; margin-bottom: 20px; }
  .deck-hero-share li { min-height: 64px; padding-inline: 7px; }
  .deck-hero-share b { font-size: 7px; }
  .deck-hero .button-row { max-width: none; grid-template-columns: 1fr; gap: 10px; }
  .deck-marketplace-cta { padding-inline: 24px; gap: 20px; font-size: 14px; }
  .deck-hero-showcase { min-height: 0; padding: 0; display: flex; flex-direction: column; }
  .deck-hero-showcase::before { width: 92%; top: 8%; left: 4%; }
  .deck-hero-app-shot { width: 100%; margin: 0; border-radius: 10px; }
  .deck-hero-app-label { min-height: 34px; grid-template-columns: 16px auto 1fr; padding-inline: 9px; font-size: 6px; }
  .deck-hero-app-label img { width: 15px; height: 15px; }
  .deck-hero-app-shot figcaption { min-height: 38px; padding: 8px 9px; align-items: flex-start; flex-direction: column; justify-content: center; gap: 4px; font-size: 6px; }
  .deck-hero-preview-shot { width: calc(100% - 28px); position: relative; left: auto; bottom: auto; margin: -40px 0 0 7px; border-radius: 9px; }
  .deck-hero-chrome-shot { width: calc(100% - 14px); position: relative; right: auto; bottom: auto; margin: -40px 0 0 14px; border-radius: 9px; }
  .deck-hero-preview-label,.deck-hero-chrome-label,.deck-hero-chrome-shot figcaption { min-height: 30px; padding-inline: 8px; font-size: 5px; }
  .deck-hero-format-bridge { width: 100%; min-height: 40px; position: relative; left: auto; bottom: auto; margin-top: 12px; font-size: 5px; }
}

/* One 16:9 cover shared by every desktop and Chrome preview. */
.deck-shared-slide {
  width: 100%;
  aspect-ratio: 16 / 9;
  container-type: inline-size;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #B1E76E;
  border: 1px solid rgba(177,231,110,.76);
  background: #102F1F;
  box-shadow: 0 14px 34px rgba(5,25,16,.36);
}
.deck-shared-slide > .deck-landscape-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 81% 41%,#B1E76E 0 13%,rgba(177,231,110,.5) 13.3% 14.2%,transparent 14.7%),#102F1F;
}
.deck-shared-slide-copy {
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 5.5%;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  pointer-events: none;
}
.deck-shared-slide-copy small,
.deck-shared-slide-copy span { font: 700 clamp(4px,1.35cqi,11px)/1 var(--mono); letter-spacing: .025em; text-transform: uppercase; }
.deck-shared-slide-copy strong {
  max-width: 46%;
  margin-top: 8%;
  color: #B1E76E;
  font-family: var(--display);
  font-size: 7.4cqi;
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: .82;
  text-transform: uppercase;
  white-space: nowrap;
}
.deck-shared-slide-copy span { width: 48%; margin-top: auto; padding-top: 2.4%; border-top: 1px solid rgba(177,231,110,.72); }

.deck-main-canvas { display: grid; place-items: center; }
.deck-main-canvas > .deck-shared-slide { width: 100%; max-height: 100%; position: relative; inset: auto; padding: 0; display: block; }

.deck-hero-showcase { min-height: 650px; padding: 0 0 0 20px; isolation: isolate; }
.deck-hero-app-shot { width: 76%; margin-left: 16%; }

/* Keep the chosen screenshot above its neighbours until another is selected. */
.deck-hero-showcase > figure.is-front { z-index: 4; }
.deck-hero-shot-select {
  position: absolute;
  inset: 0;
  z-index: 9;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
}
.deck-hero-shot-select:focus-visible { outline: 2px solid #B1E76E; outline-offset: -4px; }
.deck-hero-showcase > figure:focus-within > :is(.deck-hero-app-label, .deck-hero-preview-label, .deck-hero-chrome-label) {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s;
}

.deck-presented-slide,
.deck-browser-slide {
  aspect-ratio: 16 / 9;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(177,231,110,.36);
  background: #102F1F;
}
.deck-presented-slide::before,
.deck-presented-slide::after,
.deck-browser-slide::before,
.deck-browser-slide::after { content: none; }
.deck-presented-slide > .deck-shared-slide,
.deck-browser-slide > .deck-shared-slide { width: 100%; height: auto; border: 0; box-shadow: none; }

@media (max-width: 1150px) {
  .deck-hero-showcase { min-height: 680px; padding-left: 0; }
  .deck-hero-app-shot { width: 82%; margin-left: 6%; }
}

@media (max-width: 700px) {
  .deck-hero-showcase { min-height: 0; padding: 0; }
  .deck-hero-app-shot { width: 100%; margin-left: 0; }
  .deck-hero-showcase > figure:hover { transform: none; }
  /* A compact stack directly below the title, with exactly 16px around it. */
  .deck-hero-mobile-stack { display: flex; flex-direction: column; gap: 0; padding-top: 44px; }
  .deck-hero-mobile-stack .deck-hero-copy { display: contents; }
  .deck-hero-mobile-stack h1 { order: 0; }
  .deck-hero-mobile-stack .deck-hero-showcase {
    order: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: 16px 0;
  }
  .deck-hero-mobile-stack .deck-hero-copy > p { order: 2; margin-top: 0; }
  .deck-hero-mobile-stack .deck-hero-share { order: 3; }
  .deck-hero-mobile-stack .button-row { order: 4; }
  .deck-hero-mobile-stack .deck-hero-showcase > figure {
    grid-area: 1 / 1;
    align-self: start;
    justify-self: start;
    position: relative;
    inset: auto;
    width: calc(100% - 24px);
    margin: 0;
  }
  .deck-hero-mobile-stack .deck-hero-showcase > .deck-hero-preview-shot { margin: 40px 0 0 12px; }
  .deck-hero-mobile-stack .deck-hero-showcase > .deck-hero-chrome-shot { margin: 80px 0 0 24px; }
  .deck-hero-mobile-stack .deck-hero-chrome-body { aspect-ratio: auto; }
  .deck-presented-slide { margin: 9px; }
  .deck-closing .button-row { max-width: none; grid-template-columns: 1fr; gap: 10px; }
  .deck-closing h2 { font-size: clamp(48px, 15.5vw, 73px); }
  .deck-delivery-stage { gap: 16px; }
  .deck-delivery-stage > :is(.deck-preview-window, .deck-browser-window, .deck-share-panel) { width: 100%; margin: 0; }
}

/* Use the Modes story typography, scaled to each title's available width. */
.deck-project-heading, .deck-delivery-copy { min-width: 0; container-type: inline-size; }
.deck-project-heading h2, .deck-delivery-copy h2 {
  font-family: var(--sans);
  font-size: clamp(40px, 17cqw, 86px);
  font-weight: 850;
  line-height: .92;
  letter-spacing: -.065em;
  word-spacing: normal;
  font-kerning: normal;
  white-space: normal;
  overflow-wrap: anywhere;
}
@media (max-width: 760px) {
  .deck-project-heading h2, .deck-delivery-copy h2 { font-size: clamp(34px, 17cqw, 62px); }
}

/* The mock slides sit separately from the bordered project panels. */
.deck-project-panel.deck-project-stack { margin-top: 8px; border-left: 0 !important; }