:root{
  color-scheme:light;
  --background:#fafafa;
  --text:#202020;
  --muted:#666;
  --line:#ddd;
  --accent:#202020;
  --border:var(--line);
  --surface:var(--background);
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  color:var(--text);
  background:var(--background);
  font-synthesis:none
}
*{
  box-sizing:border-box
}
html{
  scroll-behavior:smooth;
  scroll-padding-top:28px
}
body{
  margin:0;
  font-size:16px;
  -webkit-font-smoothing:antialiased
}
a{
  color:inherit
}
button{
  font:inherit
}
button,a{
  -webkit-tap-highlight-color:transparent
}
::selection{
  background:#dce7f2;
  color:var(--text)
}
:focus-visible{
  outline:2px solid var(--text);
  outline-offset:6px
}
img{
  display:block;
  max-width:100%
}
.wrap{
  width:calc(100% - 112px);
  max-width:1360px;
  margin-inline:auto
}
.skip-link{
  position:fixed;
  top:12px;
  left:12px;
  z-index:10;
  padding:14px 20px;
  background:var(--accent);
  transform:translateY(-180%)
}
.skip-link:focus{
  transform:translateY(0)
}
.site-header{
  height:114px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  gap:24px
}
.wordmark{
  font-weight:750;
  font-size:37px;
  letter-spacing:-.07em;
  text-decoration:none;
  line-height:1
}
.main-nav{
  display:flex;
  align-items:center;
  gap:32px
}
.main-nav a{
  font-size:15px;
  line-height:1.3;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  min-height:44px
}
.main-nav a:hover,.text-link:hover{
  text-decoration:underline;
  text-underline-offset:5px
}
.main-nav .nav-support{
  gap:8px;
  border:1px solid var(--text);
  border-radius:4px;
  padding:0 18px;
  min-height:44px;
  transition:background .15s
}
.main-nav .nav-support:hover{
  background:var(--text);
  color:#fff;
  text-decoration:none
}
.hero{
  padding:69px 0 76px
}
.eyebrow{
  font-size:14px;
  line-height:1.4;
  font-weight:450;
  margin:0 0 37px
}
.eyebrow strong {
  font-weight: 600;
  white-space: nowrap;
}
.hero-content{
  display:grid;
  grid-template-columns:minmax(0,1.75fr) minmax(250px,1fr);
  align-items:end;
  gap:7%
}
h1{
  font-size:clamp(70px,7.8vw,112px);
  font-weight:500;
  letter-spacing:-.074em;
  line-height:.98;
  margin:0
}
h1 span{
  display:block
}
h1 span:last-child{
  color:var(--text)
}
.hero-note{
  max-width:350px;
  padding-bottom:5px
}
.hero-note p{
  font-size:20px;
  line-height:1.48;
  letter-spacing:-.025em;
  margin:0 0 29px
}
.text-link{
  font-size:15px;
  display:inline-flex;
  align-items:center;
  gap:16px;
  min-height:44px;
  text-decoration:none
}
.arrow{
  font-size:22px;
  line-height:1;
  display:inline-block;
  font-weight:400
}
/* Vector arrows remain monochrome independently of platform emoji fonts. */
.arrow-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -.125em;
  flex: none;
}
.arrow > .arrow-icon { display: block; }
.gallery-step { display: inline-grid; place-items: center; }
.gallery-step > span { line-height: 1; }

.hero-link{
  border-bottom:1px solid var(--text);
  padding-bottom:2px
}
.section-heading{
  border-top:1px solid var(--line);
  padding:25px 0 29px;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:24px
}
.section-heading h2{
  font-size:16px;
  line-height:1.4;
  font-weight:500;
  margin:0
}
.section-heading p{
  font-size:14px;
  color:var(--muted);
  margin:0
}
.project-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:44px 24px
}
.project-card{
  min-width:0
}
.project-card>a{
  display:block;
  text-decoration:none
}
.project-visual{
  position:relative;
  aspect-ratio:1.47;
  overflow:hidden;
  border-radius:5px;
  background:#dce5ed;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10%;
  transition:background .2s
}
.project-visual img{
  width:100%;
  height:auto;
  border-radius:3px;
  box-shadow:0 12px 28px #182a3920;
  transition:transform .35s ease
}
.project-card>a:hover .project-visual img{
  transform:translateY(-5px)
}
.visual-words{
  background:#e5e5e3
}
.visual-brew{
  background:#e8dfd0
}
.visual-37{
  background:#e7e8eb
}
.visual-hexplore{
  background:#dedff0
}
.visual-37 img,.visual-hexplore img{
  box-shadow:none
}
.project-caption{
  display:flex;
  justify-content:space-between;
  gap:24px;
  padding-top:19px
}
.project-caption h3{
  font-weight:500;
  font-size:23px;
  letter-spacing:-.04em;
  margin:0 0 7px
}
.project-caption p{
  color:var(--muted);
  font-size:16px;
  line-height:1.5;
  margin:0
}
.project-caption .arrow{
  border:1px solid var(--line);
  border-radius:50%;
  height:38px;
  width:38px;
  display:grid;
  place-items:center;
  flex:none;
  transition:background .15s,border-color .15s
}
.project-card>a:hover .project-caption .arrow{
  background:var(--accent);
  border-color:var(--accent)
}
.all-projects{
  padding:63px 0 91px
}
.all-projects h3{
  font-weight:500;
  font-size:16px;
  margin:0 0 24px
}
.project-index{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:48px
}
.index-link{
  display:grid;
  grid-template-columns:minmax(98px,32%) 1fr 20px;
  align-items:center;
  gap:12px;
  border-top:1px solid var(--line);
  padding:20px 0;
  text-decoration:none
}
.index-link strong{
  font-size:17px;
  letter-spacing:-.02em;
  font-weight:500
}
.index-link .description{
  font-size:14px;
  color:var(--muted);
  line-height:1.5
}
.index-link>.arrow{
  font-size:18px
}
.index-link:hover strong{
  text-decoration:underline;
  text-underline-offset:5px
}
.index-link:hover>.arrow{
  transform:translate(2px,-2px)
}
.about{
  border-top:1px solid var(--line);
  padding:66px 0 94px;
  display:grid;
  grid-template-columns:1fr 1.65fr;
  column-gap:10%
}
.section-label{
  font-size:14px;
  font-weight:400;
  margin:0 0 29px
}
.portrait{
  width:200px;
  aspect-ratio:1;
  object-fit:cover;
  border-radius:4px;
  margin-top:35px
}
.about-copy h2{
  font-weight:500;
  font-size:clamp(34px,3.4vw,49px);
  line-height:1.13;
  letter-spacing:-.05em;
  margin:0 0 29px;
  max-width:630px
}
.about-copy p{
  font-size:18px;
  line-height:1.65;
  max-width:590px;
  margin:0 0 19px;
  letter-spacing:-.015em
}
.about-copy p:first-of-type{
  color:var(--text)
}
.about-copy p:nth-of-type(2){
  color:var(--muted)
}
.about-copy .text-link{
  margin-top:7px
}
.portrait-caption{
  font-size:14px;
  color:var(--muted);
  line-height:1.5;
  margin:16px 0 0
}
.support{
  background:var(--accent);
  border-radius:5px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12%;
  padding:54px 52px 58px;
  margin-bottom:68px
}
.support .section-label{
  margin:0 0 33px
}
.support h2{
  font-size:clamp(37px,4vw,57px);
  line-height:1.05;
  letter-spacing:-.055em;
  font-weight:500;
  margin:0
}
.support-copy{
  align-self:end
}
.support-copy p{
  font-size:18px;
  line-height:1.6;
  margin:0 0 25px;
  max-width:400px
}
.support-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px 24px
}
.button-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  background:var(--text);
  color:#fff;
  min-height:50px;
  border-radius:4px;
  padding:12px 19px;
  text-decoration:none;
  font-size:15px
}
.button-link:hover{
  background:#404936
}
.support-actions .text-link{
  font-size:14px
}
.contact{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  padding:0 0 68px;
  border-bottom:1px solid var(--line)
}
.contact p{
  font-size:18px;
  line-height:1.5;
  margin:0
}
.contact a{
  font-size:25px;
  font-weight:450;
  letter-spacing:-.03em;
  text-decoration:none;
  border-bottom:1px solid var(--text);
  padding:8px 0
}
.contact a:hover{
  color:#646464
}
.brand-footer{
  padding:24px 0 28px;
  font-size:12px
}
.language-code{
  font-size:12px
}
.brand-language-options{
  border-radius:4px
}
.brand-language-options button{
  border-radius:2px
}
@media(min-width:1600px){
  .hero{
    padding-top:85px;
    padding-bottom:95px
  }
  .hero-content{
    gap:12%
  }
}
@media(max-width:1050px){
  .wrap{
    width:calc(100% - 64px)
  }
  .hero-content{
    grid-template-columns:1.8fr 1fr;
    gap:6%
  }
  h1{
    font-size:clamp(64px,8vw,92px)
  }
  .hero-note p{
    font-size:18px
  }
  .project-index{
    column-gap:28px
  }
  .index-link{
    grid-template-columns:minmax(95px,33%) 1fr 16px;
    gap:8px
  }
  .support{
    padding:40px 32px;
    gap:9%
  }
  .brand-footer{
    gap:8px 22px
  }
  .brand-footer-legal{
    gap:8px 22px
  }
  .brand-footer nav{
    gap:8px 18px
  }
}
@media(max-width:760px){
  .wrap{
    width:calc(100% - 40px)
  }
  .site-header{
    height:91px;
    gap:18px
  }
  .wordmark{
    font-size:32px
  }
  .main-nav{
    gap:18px
  }
  .main-nav a{
    font-size:14px
  }
  .main-nav .nav-support{
    padding-inline:12px;
    min-height:44px
  }
  .hero{
    padding:43px 0 48px
  }
  .eyebrow{
    margin-bottom:30px
  }
  .hero-content{
    grid-template-columns:1fr;
    gap:28px
  }
  h1{
    font-size:clamp(61px,11.9vw,90px);
    letter-spacing:-.068em
  }
  .hero-note{
    max-width:450px;
    padding:0
  }
  .hero-note p{
    font-size:18px;
    margin:0 0 15px
  }
  .section-heading{
    padding:22px 0;
    flex-direction:column;
    align-items:flex-start;
    gap:8px
  }
  .section-heading p{
    font-size:13px
  }
  .project-grid{
    gap:32px 18px
  }
  .project-visual{
    aspect-ratio:1.17;
    padding:8%
  }
  .project-caption{
    padding-top:15px;
    gap:12px
  }
  .project-caption h3{
    font-size:21px
  }
  .project-caption p{
    font-size:15px
  }
  .project-caption .arrow{
    width:32px;
    height:32px;
    font-size:19px
  }
  .project-index{
    grid-template-columns:1fr
  }
  .index-link{
    grid-template-columns:32% 1fr 20px;
    padding:18px 0
  }
  .all-projects{
    padding:45px 0 55px
  }
  .about{
    padding:40px 0 56px;
    grid-template-columns:1fr;
    gap:29px
  }
  .about-intro{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:12px 20px
  }
  .about-intro .section-label{
    width:100%;
    margin:0 0 4px
  }
  .portrait{
    width:96px;
    height:96px;
    margin:0
  }
  .portrait-caption{
    margin:0
  }
  .about-copy h2{
    font-size:39px;
    max-width:530px;
    margin-bottom:23px
  }
  .about-copy p{
    font-size:17px
  }
  .support{
    grid-template-columns:1fr;
    padding:32px 26px 35px;
    gap:27px;
    margin-bottom:39px
  }
  .support .section-label{
    margin-bottom:24px
  }
  .support h2{
    font-size:45px;
    max-width:450px
  }
  .support-copy p{
    font-size:17px;
    max-width:100%;
    margin-bottom:20px
  }
  .contact{
    padding-bottom:39px;
    align-items:flex-start;
    flex-direction:column;
    gap:15px
  }
  .contact p{
    font-size:16px
  }
  .contact a{
    font-size:24px
  }
  .brand-footer{
    padding-block:20px 28px
  }
}
@media(max-width:480px){
  .site-header{
    align-items:flex-start;
    justify-content:flex-start;
    flex-wrap:wrap;
    gap:12px 0;
    height:auto;
    padding:24px 0 17px
  }
  .wordmark{
    width:100%
  }
  .main-nav{
    width:100%;
    justify-content:space-between;
    gap:12px
  }
  .main-nav .nav-support{
    min-height:44px
  }
  .hero{
    padding-top:33px
  }
  .eyebrow{
    font-size:13px;
    margin-bottom:27px
  }
  h1{
    font-size:clamp(48px,12.9vw,65px)
  }
  .hero-note p{
    max-width:320px
  }
  .section-heading p{
    max-width:none;
    text-align:left;
    line-height:1.4
  }
  .project-grid{
    grid-template-columns:1fr;
    gap:32px
  }
  .project-visual{
    aspect-ratio:1.43;
    padding:10%
  }
  .project-caption h3{
    font-size:22px
  }
  .project-caption p{
    font-size:16px
  }
  .project-caption .arrow{
    width:36px;
    height:36px
  }
  .index-link{
    grid-template-columns:105px 1fr 16px
  }
  .index-link strong{
    font-size:16px
  }
  .index-link .description{
    font-size:14px
  }
  .about-copy h2{
    font-size:36px
  }
  .support h2{
    font-size:40px
  }
  .support-actions{
    gap:9px 16px
  }
  .contact a{
    font-size:23px
  }
}
@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto
  }
  *,*::before,*::after{
    transition:none!important
  }
}
.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0
}
.support>div{
  min-width:0
}
.support h2{
  overflow-wrap:break-word
}
/* Studio typography and project previews. */
[hidden] {
  display: none !important;
}
.skip-link {
  color: white;
}
h1 {
  font-size: clamp(76px, 8.2vw, 118px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.06em;
}
h1 span:last-child {
  color: var(--text);
  font-weight: inherit;
  margin-left: 0;
}
.hero-typewriter {
  display: flex;
  align-items: baseline;
  width: max-content;
  height: 1.02em;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-align: left;
  cursor: pointer;
}
.hero-typewriter:disabled {
  cursor: default;
}
.hero-typewriter [data-typewriter-word] {
  display: inline;
}
.hero-typewriter .typewriter-cursor {
  display: block;
  width: 2px;
  height: .75em;
  margin-left: .07em;
  background: currentColor;
  flex: none;
  animation: cursor-blink 1.1s steps(1, end) infinite;
}
.hero-typewriter[data-paused="true"] .typewriter-cursor {
  animation: none;
  opacity: .35;
}
@keyframes cursor-blink {
  0%, 48% { opacity: 1; }
  49%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-typewriter .typewriter-cursor {
    animation: none;
    display: none;
  }
}
.hero {
  padding-bottom: 82px;
}
.hero-note {
  padding-bottom: 8px;
}
.brand-footer .dryyyve-signature .wordmark {
  width: auto;
  font: 750 25px/1 'Helvetica Neue', Helvetica, Arial, sans-serif;
  letter-spacing: -.07em;
  color: var(--text);
  /* Align the visible glyphs with the smaller signature text. */
  transform: translateY(-2px);
}
.brand-footer .dryyyve-signature {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.support {
  background: #e8ff79;
  color: var(--text);
}
.support .button-link {
  color: #fff;
  background: var(--text);
}
.support .button-link:hover {
  background: #3c3c3c;
}
.support :focus-visible {
  outline-color: var(--text);
}
.about-intro h2 {
  font-size: clamp(34px, 3.5vw, 49px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.05em;
  margin: 0;
}
.founder {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
}
.founder img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 50%;
  flex: none;
}
.about-copy .founder-name, .about-copy .founder-role {
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  margin: 0;
}
.about-copy .founder-role {
  color: var(--muted);
  font-size: 14px;
  margin-top: 2px;
}
.about-copy .text-link {
  margin-top: 0;
}
.preview-trigger {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 5px;
  color: var(--text);
  background: transparent;
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.preview-trigger:disabled {
  cursor: default;
}
.preview-trigger:hover img {
  transform: translateY(-4px);
}
.preview-trigger:focus-visible {
  outline-offset: 6px;
}
.preview-hint {
  display: none;
  align-items: center;
  gap: 22px;
  position: absolute;
  right: 16px;
  bottom: 16px;
  padding: 9px 13px;
  background: #fff;
  border-radius: 2px;
  font-size: 13px;
  line-height: 1.4;
}
.gallery-ready .preview-hint {
  display: inline-flex;
}
.preview-hint > span:last-child {
  font-size: 21px;
  line-height: 1;
}
.visual-phone {
  padding: 6%;
}
.visual-phone img {
  width: auto;
  height: 100%;
  max-width: 76%;
  object-fit: contain;
  border-radius: 9px;
}
.project-caption {
  align-items: flex-start;
}
.project-caption > div {
  min-width: 0;
  flex: 1;
}
.project-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 20px;
  margin-top: 4px;
}
.project-meta .device-label {
  margin: 0;
}
.project-like {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.project-like svg {
  width: 16px;
  height: 16px;
  flex: none;
}
.project-like:hover, .project-like[aria-pressed="true"] {
  color: var(--text);
}
.project-like[aria-pressed="true"] svg {
  fill: currentColor;
}
.project-like.needs-refresh svg {
  display: none;
}
.project-like.needs-refresh::before {
  content: '\21BB\FE0E';
  width: 16px;
  font-size: 19px;
  line-height: 1;
}
.project-like:disabled {
  cursor: wait;
  opacity: .55;
}
.likes-status {
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 20px;
  color: var(--muted);
}
.likes-status:empty {
  display: none;
}
.likes-status:not(.is-error) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.likes-status.is-error {
  margin-bottom: 4px;
}
.likes-retry {
  min-height: 44px;
  margin: 0 0 20px;
  padding: 0;
  color: var(--text);
  background: transparent;
  border: 0;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.project-launch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-height: 44px;
  text-decoration: none;
  flex: none;
}
.project-caption .project-launch .arrow {
  border: 0;
  border-radius: 0;
  background: transparent;
  width: auto;
  height: auto;
  transition: transform .2s;
}
.project-launch:hover .arrow {
  transform: translate(2px, -2px);
}
.device-label {
  display: block;
  font-size: 14px;
  line-height: 1.4;
  color: var(--muted);
  margin-top: 14px;
}
.index-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  border-top: 1px solid var(--line);
  padding: 22px 0;
}
.index-copy h4 {
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -.025em;
  margin: 0 0 7px;
}
.index-copy p {
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  color: var(--muted);
}
.index-copy .device-label {
  font-size: 13px;
  margin-top: 0;
}
.index-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.index-preview {
  font: inherit;
  font-size: 14px;
  border: 0;
  padding: 0 6px;
  min-height: 44px;
  background: none;
  color: var(--text);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: #a3a3a3;
}
.index-preview:hover {
  text-decoration-color: var(--text);
}
.has-gallery {
  overflow: hidden;
}
.project-gallery {
  width: min(1080px, calc(100% - 48px));
  max-height: calc(100dvh - 48px);
  padding: 0;
  border: 0;
  border-radius: 6px;
  color: var(--text);
  background: var(--background);
  overflow: auto;
  overscroll-behavior: contain;
}
.project-gallery::backdrop {
  background: #151515b8;
}
.gallery-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding: 25px 30px 20px;
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--background);
}
.gallery-eyebrow {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 9px;
}
.gallery-header h2 {
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -.045em;
  margin: 0;
  line-height: 1;
}
.gallery-header .device-label {
  margin: 9px 0 0;
}
.gallery-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 29px;
  line-height: 1;
  flex: none;
}
.gallery-close svg {
  display: block;
  width: 24px;
  height: 24px;
}
.gallery-close:hover, .gallery-step:hover {
  background: #e9e9e9;
}
.gallery-figure {
  margin: 0 30px;
}
.gallery-stage {
  height: min(52vh, 560px);
  min-height: 210px;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  background: #e9eaec;
  padding: 12px;
  overflow: hidden;
  touch-action: pan-y pinch-zoom;
}
.gallery-stage img {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  user-select: none;
}
.gallery-stage-phone img {
  border-radius: 7px;
}
.gallery-stage p {
  margin: 20px;
  max-width: 400px;
  text-align: center;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
}
.gallery-caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  font-size: 14px;
  line-height: 1.45;
  padding: 14px 0;
}
[data-gallery-count] {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.gallery-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 17px;
  padding: 0 30px 19px;
}
.gallery-step {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: transparent;
  color: var(--text);
  font-size: 23px;
  cursor: pointer;
  flex: none;
}
.gallery-thumbnails {
  display: flex;
  align-items: center;
  gap: 10px;
}
.gallery-thumbnail {
  display: block;
  overflow: hidden;
  width: 80px;
  height: 56px;
  padding: 3px;
  border: 1px solid transparent;
  background: #e8e8e8;
  cursor: pointer;
}
.gallery-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.gallery-thumbnail[aria-pressed="true"] {
  border-color: var(--text);
}
.gallery-bottom {
  margin: 0 30px;
  padding: 20px 0 25px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.gallery-bottom p {
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
}
.gallery-bottom .button-link {
  flex: none;
}
@media (max-width: 1050px) {
  h1 {
    font-size: clamp(68px, 9vw, 100px);
  }
  .index-row {
    gap: 7px;
  }
  .index-actions {
    gap: 0;
  }
}
@media (max-width: 760px) {
  h1 {
    font-size: clamp(64px, 11.8vw, 90px);
  }
  .hero {
    padding-bottom: 48px;
  }
  .project-index {
    grid-template-columns: 1fr;
  }
  .index-row {
    gap: 18px;
  }
  .about-intro {
    display: block;
  }
  .about-intro h2 {
    max-width: 410px;
    font-size: 39px;
  }
  .project-gallery {
    width: calc(100% - 20px);
    max-height: calc(100dvh - 20px);
  }
  .gallery-header {
    padding: 20px 18px 18px;
  }
  .gallery-figure {
    margin-inline: 18px;
  }
  .gallery-stage {
    height: min(53dvh, 490px);
    min-height: 180px;
    padding: 6px;
  }
  .gallery-controls {
    padding-inline: 18px;
    gap: 12px;
  }
  .gallery-bottom {
    margin-inline: 18px;
    gap: 16px;
    flex-wrap: wrap;
  }
  .gallery-bottom p {
    flex: 1 1 160px;
  }
  .gallery-thumbnail {
    width: 67px;
    height: 48px;
  }
}
@media (max-width: 480px) {
  h1 {
    font-size: clamp(50px, 14.5vw, 66px);
  }
  .preview-hint {
    right: 12px;
    bottom: 12px;
    font-size: 12px;
  }
  .device-label {
    margin-top: 10px;
  }
  .about-intro h2 {
    font-size: 36px;
  }
  .index-row {
    gap: 5px;
  }
  .index-preview {
    padding-inline: 4px;
    font-size: 13px;
  }
  .index-actions .project-launch {
    width: 38px;
  }
  .gallery-header h2 {
    font-size: 29px;
  }
  html[lang="en"] h1 {
    font-size: clamp(40px, 12.4vw, 58px);
  }
}
@media (max-width: 380px) {
  .main-nav {
    gap: 8px;
  }
  .main-nav a {
    font-size: 12px;
  }
  .main-nav .nav-support {
    gap: 5px;
    padding-inline: 8px;
  }
  .nav-support .signature-cup {
    width: 14px;
    height: 14px;
  }
}

.gallery-empty-preview{display:flex;align-items:center;justify-content:center;min-height:200px;padding:24px;font-size:13px;color:var(--muted);text-align:center}.preview-trigger:disabled .preview-hint{display:none}