/* Compact catalog. Product landings do not load this stylesheet. */
:root {
  color-scheme:dark;
  --ink:#f5f5f7;
  --muted:#a5a7b0;
  --paper:#111216;
  --blue:#8abaff;
  --line:#363840;
  --header-surface:#191a1fe8;
  --toggle-surface:#2a2c34;
  --toggle-selected:#484b57;
  --card-detail:#b7bdc9;
  --card-surface:#23252d;
  --status-ready:#85dab0;
  --tabs-surface:#20293a;
  --tabs-band:#334765;
  --tabs-glow:#51446b;
  --beewbe-surface:#20312c;
  --beewbe-band:#36594e;
  --beewbe-glow:#626f4a;
  --pet-surface:#302a3e;
  --pet-band:#494365;
  --pet-band-end:#61516d;
  --garnet-surface:#32262e;
  --garnet-band:#60414f;
  background:var(--paper)
}
/* An explicit light preference is the only override; unknown support stays dark. */
@media(prefers-color-scheme:light) {
  :root {
    color-scheme:light;
    --ink:#1d1d1f;
    --muted:#6e6e73;
    --paper:#f5f5f7;
    --blue:#0066cc;
    --line:#dcdce0;
    --header-surface:#ffffffe0;
    --toggle-surface:#ededf0;
    --toggle-selected:#fff;
    --card-detail:#62626a;
    --card-surface:#fff;
    --status-ready:#28704e;
    --tabs-surface:#e9eef8;
    --tabs-band:#d5e1f4;
    --tabs-glow:#e4ceff;
    --beewbe-surface:#eaf1e9;
    --beewbe-band:#b7d9d3;
    --beewbe-glow:#fff6cf;
    --pet-surface:#eeebf5;
    --pet-band:#c8c8e8;
    --pet-band-end:#ddd1e6;
    --garnet-surface:#faf1f3;
    --garnet-band:#efd4dc
  }
}
.home-page {
  background:var(--paper);
  min-height:100vh
}
.home-page .site-header {
  background:var(--header-surface);
  border-bottom-color:var(--line)
}
.home-page .language {
  background:var(--toggle-surface);
  flex-shrink:0;
  font-size:.6875rem
}
.home-page .language a[aria-current=page] {
  background:var(--toggle-selected)
}
.home-page .skip-link {
  color:var(--ink);
  background:var(--card-surface)
}
.home-page a:focus-visible {
  outline-color:var(--blue)
}
.home-page .wordmark {
  min-width:0;
  white-space:normal;
  overflow-wrap:anywhere;
  font-size:1.1875rem
}
.home-page .nav-links {
  font-size:.8125rem
}
.home-page a:not(.project-card-link):active {
  text-decoration:underline;
  text-underline-offset:4px
}
.project-card-link:active::after {
  box-shadow:inset 0 0 0 2px var(--blue)
}
.home-page .wrap {
  width:min(1320px,calc(100% - 80px))
}
.home-hero {
  padding:56px 24px 38px;
  text-align:center
}
.home-hero h1 {
  font-size:clamp(2.25rem,.5rem + 2.6vw,3.5rem);
  font-weight:650;
  line-height:1.12;
  letter-spacing:-.05em;
  hyphens:auto;
  overflow-wrap:anywhere
}
.home-hero h1 span {
  color:var(--muted)
}
.home-hero .intro {
  margin-top:14px;
  font-size:1.0625rem;
  line-height:1.5;
  color:var(--muted)
}
.work {
  padding:14px 0 48px
}
.section-top {
  margin-bottom:18px
}
.section-top h2 {
  font-size:1.25rem;
  letter-spacing:-.5px;
  font-weight:600
}
.project-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px
}
.project-card {
  --card-size:296px;
  --band-height:calc(var(--card-size) / 4);
  --band-color:#e6e8ee;
  position:relative;
  min-width:0;
  min-height:var(--card-size);
  display:flex;
  flex-direction:column;
  border-radius:24px;
  background:var(--card-surface);
  color:var(--card-ink,var(--ink));
  box-shadow:0 2px 8px #00000003;
  transition:transform .2s ease,box-shadow .2s ease
}
.project-card-link {
  -webkit-user-drag:none;
  border-radius:inherit
}
.project-card-link::after {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit
}
.project-card-link:focus-visible {
  outline:none
}
.project-card-link:focus-visible::after {
  outline:3px solid var(--blue);
  outline-offset:4px
}
.card-visual {
  position:relative;
  width:100%;
  height:var(--band-height);
  flex:none;
  overflow:hidden;
  display:grid;
  place-items:center;
  border-radius:24px 24px 0 0;
  background:var(--band-color)
}
.card-icon {
  width:64px;
  height:64px;
  object-fit:contain
}
.card-variant {
  position:absolute;
  top:10px;
  left:12px;
  z-index:2;
  padding:4px 6px;
  border-radius:5px;
  background:#ffffffc9;
  color:#41444d;
  font-size:10px;
  line-height:1.2;
  letter-spacing:.02em;
  font-weight:600;
  backdrop-filter:blur(8px)
}
.card-arrow {
  position:absolute;
  top:calc(var(--band-height) / 2 - 11px);
  right:22px;
  color:var(--card-detail);
  font-size:22px;
  line-height:1
}
.card-copy {
  /* Keep real text above the card link so native selection works without JS. */
  position:relative;
  pointer-events:none;
  -webkit-user-select:text;
  user-select:text;
  cursor:text;
  flex:1;
  min-height:184px;
  padding:48px 28px 28px
}
.card-copy > * {
  pointer-events:auto
}
.has-copy-link .card-copy {
  cursor:pointer
}
.card-copy h3 {
  font-size:1.4375rem;
  letter-spacing:-.65px;
  line-height:1.2;
  font-weight:650;
  overflow-wrap:anywhere
}
.card-copy p {
  margin-top:10px;
  color:var(--card-detail);
  font-size:.9375rem;
  line-height:1.5
}
.card-link-note {
  display:block;
  margin-top:10px;
  color:var(--card-detail);
  font-size:.75rem;
  line-height:1.4
}
.card-status {
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:8px;
  font-size:.6875rem;
  font-weight:500;
  line-height:1.3;
  color:var(--card-detail)
}
.card-status.availability-available,.card-status.availability-beta {
  color:var(--status-ready)
}
.status-dot {
  width:5px;
  height:5px;
  border-radius:50%;
  background:currentColor;
  flex:none
}
.project-card.tabs {
  --band-color:var(--tabs-band);
  background:var(--tabs-surface)
}
.project-card.beewbe {
  --band-color:var(--beewbe-band);
  background:var(--beewbe-surface)
}
.project-card:not(.tabs) {
  transition-duration:.35s
}
.project-card.battery {
  --band-color:#303946;
  --card-ink:#f5f5f7;
  --card-detail:#b6b6bd;
  background:#1d1d21;
  color:#f5f5f7
}
.battery .card-copy p,.battery .card-arrow {
  color:#b6b6bd
}
.project-card.pet {
  --band-color:var(--pet-band);
  background:var(--pet-surface)
}
.project-card.garnet {
  --band-color:var(--garnet-band);
  background:var(--garnet-surface)
}
.garnet-cycle {
  inline-size:66px;
  block-size:66px;
  fill:none;
  stroke-width:12;
  stroke-linecap:round;
  filter:drop-shadow(0 3px 5px #40222c26)
}
.garnet-cycle path:nth-child(1) { stroke:#e9a2b2 }
.garnet-cycle path:nth-child(2) { stroke:#d67c93 }
.garnet-cycle path:nth-child(3) { stroke:#f0bcc3 }
.garnet-cycle path:nth-child(4) { stroke:#f2d8c7 }
/* Native interface fragments stay inside the same quarter-height header. */
.interface-image {
  position:absolute;
  max-width:none;
  height:auto;
  left:50%;
  transform:translateX(-50%)
}
.variant-interface.tabs .card-visual {
  background:#34363b
}
.variant-interface.tabs .interface-image {
  width:640px;
  top:-62px
}
.variant-interface.tabs .card-arrow {
  color:#d4d7df
}
.variant-interface.beewbe .interface-image {
  width:290px;
  top:-170px;
  border-radius:16px
}
.variant-interface.battery .card-visual {
  background:#050607
}
.variant-interface.battery .interface-image {
  width:246px;
  top:-17px
}
.variant-interface.pet .interface-image {
  width:100%;
  left:0;
  top:0;
  transform:translateY(-24.5%)
}
/* Decorative concepts, rather than additional product screenshots. */
.variant-concept.tabs .card-visual {
  background:radial-gradient(ellipse at 50% 120%,var(--tabs-glow),transparent 75%),var(--tabs-band)
}
.tab-scene {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px
}
.tab-tile {
  --tab-rest:rotate(-13deg) translateY(3px);
  --tab-open:translateX(-7px) rotate(-20deg) translateY(2px);
  width:48px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid #ffffffb3;
  border-radius:10px;
  background:#97bde8;
  color:#254a7a;
  font:600 19px ui-monospace,monospace;
  box-shadow:0 5px 9px #49618d24;
  transform:var(--tab-rest)
}
.tab-tile:nth-child(2) {
  --tab-rest:translateY(-3px);
  --tab-open:translateY(-6px);
  background:#faf6ff;
  color:#7d5db3;
  transform:translateY(-3px)
}
.tab-tile:last-child {
  --tab-rest:rotate(13deg) translateY(3px);
  --tab-open:translateX(7px) rotate(20deg) translateY(2px);
  background:#b6d9d6;
  color:#386f6b;
  transform:rotate(13deg) translateY(3px)
}
.variant-concept.beewbe .card-visual {
  background:radial-gradient(ellipse at 50% 115%,var(--beewbe-glow),transparent 75%),var(--beewbe-band)
}
.pet-friends {
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
  min-height:0
}
.pet-friend {
  --friend-rest:rotate(-12deg);
  --friend-open:translateX(-7px) rotate(-18deg) translateY(-1px);
  position:relative;
  width:min(54px,calc(var(--band-height) * .75));
  height:min(54px,calc(var(--band-height) * .75));
  flex:none;
  transform:var(--friend-rest)
}
.pet-friend:nth-child(2) {
  --friend-rest:translateY(-2px);
  --friend-open:translateY(-4px);
  width:min(72px,var(--band-height));
  height:min(72px,var(--band-height));
  margin-inline:-8px
}
.pet-friend:last-child {
  --friend-rest:rotate(12deg);
  --friend-open:translateX(7px) rotate(18deg) translateY(-1px)
}
.pet-friend img {
  width:100%;
  height:100%;
  object-fit:contain
}
.pet-friend picture {
  display:block;
  width:100%;
  height:100%
}
.pet-eyelids {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  fill:var(--eyelid)
}
.pet-eyelids path {
  fill:none;
  stroke:#514b3d;
  stroke-width:6;
  stroke-linecap:round
}
.pet-friend.mint {
  --eyelid:#b1d3c8;
  --blink-delay:180ms
}
.pet-friend.lavender {
  --eyelid:#d1c0e4;
  --blink-delay:0ms
}
.pet-friend.sky {
  --eyelid:#adcde3;
  --blink-delay:360ms
}
.variant-concept.battery .card-visual {
  background:radial-gradient(ellipse at 50% 120%,#37525b,transparent 78%),#202a32
}
.charge-scene {
  display:flex;
  gap:12px
}
.charge-orbit {
  --orbit-y:0px;
  --orbit-delay:0ms;
  --charge:#77d5cc;
  --arc:290deg;
  width:44px;
  height:44px;
  padding:4px;
  border-radius:50%;
  background:conic-gradient(var(--charge) var(--arc),#ffffff16 0);
  box-shadow:0 0 15px color-mix(in srgb,var(--charge) 12%,transparent)
}
.charge-orbit:nth-child(2) {
  --orbit-y:-5px;
  --orbit-delay:160ms;
  --charge:#ffcb76;
  --arc:225deg;
  transform:translateY(-5px)
}
.charge-orbit:last-child {
  --orbit-delay:320ms;
  --charge:#8ebaff;
  --arc:330deg
}
.charge-orbit svg {
  width:100%;
  height:100%;
  padding:8px;
  background:#26333b;
  border-radius:50%;
  fill:none;
  stroke:#e5edf1;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round
}
.variant-concept.pet .card-visual {
  background:linear-gradient(115deg,var(--pet-band),var(--pet-band-end))
}
.pixel-scene {
  position:relative;
  height:58px;
  display:flex;
  align-items:flex-end;
  gap:8px;
  padding-bottom:4px;
  border-bottom:3px solid #a6a3c8
}
.pixel-building {
  width:22px;
  height:24px;
  border:3px solid #a29cc4;
  background:repeating-linear-gradient(0deg,transparent 0 5px,#a29cc4 5px 8px),repeating-linear-gradient(90deg,#f2e9c6 0 4px,#a29cc4 4px 7px)
}
.pixel-building:nth-child(3) {
  height:38px
}
.pixel-building:last-child {
  height:48px
}
.pixel-scene picture,.pixel-scene img {
  width:44px;
  height:44px;
  flex:none;
  display:block;
  object-fit:contain;
  image-rendering:pixelated
}
.pixel-star {
  position:absolute;
  top:0;
  left:3px;
  width:4px;
  height:4px;
  background:#f9f3cf;
  box-shadow:0 -4px #f9f3cf,0 4px #f9f3cf,-4px 0 #f9f3cf,4px 0 #f9f3cf
}
.icon-orbit {
  width:140px;
  display:grid;
  place-items:center;
  border:1px solid #ffffff80;
  border-radius:50%
}
.contact {
  padding:30px 0 34px
}
.contact .wrap {
  border-top:1px solid var(--line);
  padding-top:28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px
}
.contact h2 {
  font-size:1.25rem;
  font-weight:600;
  letter-spacing:-.5px
}
.contact-links {
  display:flex;
  flex-wrap:wrap;
  gap:12px 32px
}
.contact-links .text-link {
  font-size:.9375rem;
  overflow-wrap:anywhere
}
.home-page .footer {
  padding-block:22px;
  font-size:.75rem
}
@media(pointer:coarse) {
  .home-page .language a {
    min-inline-size:44px;
    min-block-size:44px
  }
}
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
  .project-card:hover {
    transform:translateY(-4px);
    box-shadow:0 10px 24px #0000000a
  }
}
/* One brief sequence on entry or interaction, never an endless loop. */
@media(prefers-reduced-motion:no-preference) {
  .is-animating .tab-tile {
    animation:tab-fan 1100ms ease-in-out
  }
  .is-animating .pet-friend {
    animation:pet-fan 1800ms ease-in-out
  }
  .is-animating .pet-eyelids {
    animation:pet-blink 1800ms ease-in-out var(--blink-delay)
  }
  .is-animating .charge-orbit {
    animation:charge-arrive 1100ms cubic-bezier(.25,.1,.25,1) var(--orbit-delay) both
  }
  .is-animating .pixel-star {
    animation:pixel-twinkle 1800ms ease-in-out
  }
  .is-animating .garnet-cycle {
    animation:garnet-arrive 1000ms ease-out
  }
}
@keyframes garnet-arrive {
  from { opacity:.5; transform:rotate(-12deg) scale(.9) }
  to { opacity:1; transform:rotate(0) scale(1) }
}
@keyframes tab-fan {
  0%,100% {transform:var(--tab-rest)}
  45%,60% {transform:var(--tab-open)}
}
@keyframes pet-fan {
  0%,100% {transform:var(--friend-rest)}
  45%,60% {transform:var(--friend-open)}
}
@keyframes pet-blink {
  0%,28%,68%,100% {opacity:0}
  42%,52% {opacity:1}
}
@keyframes charge-arrive {
  from {opacity:.45;transform:translateY(calc(var(--orbit-y) + 4px)) scale(.9)}
  to {opacity:1;transform:translateY(var(--orbit-y)) scale(1)}
}
@keyframes pixel-twinkle {
  0%,100% {opacity:1;transform:scale(1)}
  35% {opacity:.55;transform:scale(.85)}
  65% {opacity:1;transform:scale(1.12)}
}
@media(max-width:1100px) {
  .home-page .wrap {
    width:calc(100% - 48px)
  }
  .project-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .project-card {
    --card-size:260px
  }
  .card-copy {
    padding-top:32px
  }
}
@media(max-width:600px) {
  .home-page .wrap {
    width:calc(100% - 32px)
  }
  .home-header .navigation {
    min-height:56px;
    padding-block:0;
    flex-wrap:nowrap
  }
  .home-header .nav-links {
    display:none
  }
  .home-header .language {
    margin-left:auto
  }
  .home-page .wordmark {
    font-size:1.0625rem
  }
  .home-hero {
    padding:24px 16px 22px
  }
  .home-hero h1 {
    font-size:2.125rem;
    letter-spacing:-.045em
  }
  .home-hero h1 span {
    display:block
  }
  html[lang=ru] .home-hero h1 {
    font-size:clamp(1.5625rem,.5rem + 5.4vw,2.125rem)
  }
  .home-hero .intro {
    max-width:290px;
    margin:10px auto 0;
    font-size:.8125rem;
    line-height:1.45
  }
  .work {
    padding:8px 0 24px
  }
  .section-top {
    margin-bottom:12px
  }
  .section-top h2 {
    font-size:1.0625rem
  }
  .project-grid {
    grid-template-columns:minmax(0,1fr);
    gap:12px
  }
  .project-card {
    border-radius:22px
  }
  .project-card {
    --card-size:clamp(196px,30svh,280px)
  }
  .card-visual {
    border-radius:22px 22px 0 0
  }
  .card-icon {
    width:48px;
    height:48px
  }
  .card-arrow {
    top:calc(var(--band-height) / 2 - 10px);
    font-size:20px
  }
  .card-copy h3 {
    font-size:1.375rem
  }
  .card-copy {
    flex:none;
    margin-top:auto;
    min-height:0;
    padding:22px 24px
  }
  .card-copy p {
    margin-top:8px;
    font-size:.875rem;
    line-height:1.45
  }
  .card-status {
    font-size:.75rem
  }
  .contact {
    padding:20px 0
  }
  .contact .wrap {
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    padding-top:24px
  }
  .contact-links {
    gap:0 24px
  }
  .home-page .footer {
    font-size:.6875rem;
    padding-block:16px
  }
}
@media(max-width:600px) and (max-height:740px) {
  .card-copy {
    padding-block:16px
  }
  .card-status {
    margin-bottom:6px
  }
  .home-hero {
    padding-block:16px 14px
  }
  .home-hero h1 {
    font-size:1.875rem
  }
  .home-hero .intro {
    margin-top:8px
  }
}
@media(max-width:600px) and (max-height:600px) {
  .home-hero {
    padding-block:12px
  }
  .home-hero h1 {
    font-size:1.625rem
  }
  .project-card {
    --card-size:196px
  }
  .card-copy {
    padding:10px 20px
  }
  .card-icon {
    width:36px;
    height:36px
  }
  .card-arrow {
    right:20px
  }
  .card-copy h3 {
    font-size:1.25rem
  }
  .card-variant {
    top:6px;
    left:8px;
    font-size:8px
  }
}