/* Shared foundation of both homepage concepts: project fonts, reset, concept switcher, live 3D scene contract and the published living-page examples. */ #root .zh-home *,#root .zh-home *::before,#root .zh-home *::after{box-sizing:border-box} #root .zh-home{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px} #root .zh-home{margin:0;min-width:320px} #root .zh-home img,#root .zh-home svg,#root .zh-home canvas{display:block;max-width:100%} #root .zh-home button,#root .zh-home input{font:inherit;color:inherit;letter-spacing:inherit} #root .zh-home button{cursor:pointer;-webkit-tap-highlight-color:transparent} #root .zh-home a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent} #root .zh-home h1,#root .zh-home h2,#root .zh-home h3,#root .zh-home p{margin:0} #root .zh-home [hidden]{display:none!important} #root .zh-home .sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} #root .zh-home .icon{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} /* Live 3D scene contract from home-graphic-scenes: stage size comes from the layout, captions cycle while graphics run and become a plain list as a fallback. */ #root .zh-home .direction-scene{position:relative;min-width:0} #root .zh-home .direction-visual{position:relative;display:block} #root .zh-home .direction-stage{position:relative;display:block;width:100%;overflow:hidden} #root .zh-home .direction-captions{display:grid;gap:6px} #root .zh-home .direction-link{display:block;min-width:0} #root .zh-home .direction-caption{display:block;min-width:0} #root .zh-home .direction-caption b,#root .zh-home .direction-caption small{display:block} #root .zh-home .direction-scene:not([data-cycling=true]) .direction-link:not(:first-child) .direction-caption small{display:none} /* Toast for local downloads. */ #root .zh-home .concept-toast{position:fixed;left:50%;bottom:96px;z-index:90;transform:translateX(-50%);max-width:calc(100% - 32px);padding:12px 18px;border-radius:14px;background:#10172e;color:#fff;font:500 15px/1.4 Onest,sans-serif;box-shadow:0 18px 40px -20px rgba(16,23,46,.6)} @media (prefers-reduced-motion:reduce){ #root .zh-home{scroll-behavior:auto} #root .zh-home *,#root .zh-home *::before,#root .zh-home *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} } /* Главная «Живой код». Белая страница. Три техники изображений в одной системе: «Кубики» — подпись бренда в истории первого экрана; «Объём» — классические живые 3D-сцены направлений и натюрморт в финале; «Рисунок» — SVG прежней техники в инструментах, примерах и паспортах. Метка-«пиксель» — маленькие квадратики бренда, без перебора. */ #root .zh-home{ --bg:var(--vz-bg); --tint:var(--vz-tint); --surface:var(--vz-surface); --ink:var(--vz-ink); --cobalt:var(--vz-cobalt); --cobalt-2:var(--vz-cobalt-2); --cobalt-soft:var(--vz-cobalt-soft); --mandarin:var(--vz-mandarin); --mandarin-2:var(--vz-mandarin-2); --lime:var(--vz-lime); --lime-2:var(--vz-lime-2); --lime-soft:var(--vz-lime-soft); --sky:var(--vz-sky); --sky-soft:var(--vz-sky-soft); --muted:var(--vz-muted); --line:var(--vz-line); --pad:clamp(16px,4vw,64px); --head:76px; --px:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 10'%3E%3Crect width='8' height='8' y='1' rx='2' fill='%232548bd'/%3E%3Crect x='11' width='8' height='8' y='1' rx='2' fill='%23f45f1c'/%3E%3Crect x='22' width='8' height='8' y='1' rx='2' fill='%23a9cf3f'/%3E%3C/svg%3E"); margin:0;background:var(--bg);color:var(--ink); font:400 17px/1.55 Onest,sans-serif;-webkit-font-smoothing:antialiased; } #root .zh-home :focus-visible{outline:3px solid var(--cobalt);outline-offset:3px;border-radius:8px} #root .zh-home .b-wrap{width:min(1312px,100% - 2*var(--pad));margin-inline:auto} #root .zh-home .b-blue{color:var(--cobalt)} #root .zh-home h2{font:600 clamp(30px,3.3vw,48px)/1.06 Unbounded,sans-serif;letter-spacing:-.045em;text-wrap:balance} #root .zh-home .b-copy{color:var(--muted);font-size:18px;line-height:1.6} #root .zh-home .b-note{color:var(--muted);font-size:15px;line-height:1.55} #root .zh-home .b-fine{margin-top:16px;color:var(--muted);font-size:14px;line-height:1.55} #root .zh-home .b-fine a,#root .zh-home .b-faq p a,#root .zh-home .b-how__links a{color:var(--cobalt);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px} #root .zh-home .b-fine--center{text-align:center} #root .zh-home .b-eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 14px;color:var(--cobalt);font:600 13px/1.2 Onest,sans-serif;letter-spacing:.08em;text-transform:uppercase} #root .zh-home .b-eyebrow::before{content:"";width:30px;height:10px;background:var(--px) center/contain no-repeat} #root .zh-home .b-eyebrow--lime{color:var(--lime)} /* Actions */ #root .zh-home .b-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border:0;border-radius:16px;background:linear-gradient(180deg,var(--mandarin-2) -50%,var(--mandarin) 60%);color:#fff;font:700 19px/1 Onest,sans-serif;letter-spacing:-.01em;white-space:nowrap;box-shadow:0 14px 28px -16px rgba(244,95,28,.9),inset 0 1px 0 rgba(255,255,255,.25);transition:translate .2s,box-shadow .2s} #root .zh-home .b-btn:hover{translate:0 -2px;box-shadow:0 20px 34px -16px rgba(244,95,28,.95),inset 0 1px 0 rgba(255,255,255,.25)} #root .zh-home .b-btn .icon{width:20px;height:20px;stroke-width:2.2} #root .zh-home .b-btn--lg{min-height:60px;padding:0 28px} #root .zh-home .b-btn--sm{min-height:44px;padding:0 18px;border-radius:12px;background:var(--cobalt);font-size:15px;box-shadow:0 10px 22px -14px rgba(37,72,189,.9)} #root .zh-home .b-btn--sm:hover{box-shadow:0 14px 26px -14px rgba(37,72,189,.95)} #root .zh-home .b-more{display:inline-flex;align-items:center;gap:6px;color:var(--cobalt);font-weight:600;font-size:16px} #root .zh-home .b-more .icon{width:16px;height:16px;transition:transform .2s} #root .zh-home .b-more:hover .icon{transform:translate(2px,-2px)} #root .zh-home .b-actions{display:flex;align-items:center;flex-wrap:wrap;gap:14px 22px} /* Header with the camera as a hot tool */ #root .zh-home .b-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px);transition:box-shadow .25s} #root .zh-home .b-header.is-scrolled{box-shadow:0 1px 0 var(--line)} #root .zh-home .b-header__in{display:flex;align-items:center;gap:36px;height:var(--head)} #root .zh-home .b-brand{display:inline-flex;align-items:center;gap:11px;flex:none;font:600 19px/1 Unbounded,sans-serif;letter-spacing:-.05em;white-space:nowrap} #root .zh-home .b-brand svg{width:32px;height:32px;color:var(--cobalt)} #root .zh-home .b-brand b{color:var(--cobalt);font-weight:600} #root .zh-home .b-nav{display:flex;gap:28px} #root .zh-home .b-nav a{position:relative;padding:8px 0;color:#353d55;font:500 15px/1 Onest,sans-serif} #root .zh-home .b-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;border-radius:2px;background:var(--cobalt);transition:right .25s} #root .zh-home .b-nav a:hover::after{right:0} #root .zh-home .b-header__actions{display:flex;align-items:center;gap:12px;margin-left:auto} #root .zh-home .b-textlink{margin-right:6px;font:600 15px/1 Onest,sans-serif} #root .zh-home .b-textlink:hover{color:var(--cobalt)} #root .zh-home .b-cam{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px 0 8px;border-radius:12px;background:var(--cobalt-soft);color:var(--cobalt);font:600 15px/1 Onest,sans-serif;transition:background .2s,box-shadow .2s} #root .zh-home .b-cam img{width:40px;height:30px;transition:transform .3s cubic-bezier(.2,.8,.2,1)} #root .zh-home .b-cam:hover{background:#dfe7ff;box-shadow:inset 0 0 0 1.5px var(--cobalt)} #root .zh-home .b-cam:hover img{transform:rotate(-6deg) scale(1.08)} /* Сайт помечает входы в сканер рисунком камеры; на главной кнопки уже со своими значками. */ #root .zh-home :is([data-camera-entry],a[href^="/qr-kody/skaner-qr-onlayn/"])::before{content:none!important;display:none!important}#root .zh-home .b-iconbtn{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:12px;background:var(--surface)} #root .zh-home .b-iconbtn .icon{width:21px;height:21px} #root .zh-home .b-menu-btn{display:none} #root .zh-home .b-sheet{border-top:1px solid var(--line);background:#fff} #root .zh-home .b-sheet nav{display:grid;padding:4px 0 18px} #root .zh-home .b-sheet a{padding:14px 0;border-bottom:1px solid var(--line);font:600 18px/1.3 Onest,sans-serif} /* Story */ #root .zh-home .b-story{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:0 40px} #root .zh-home .b-story__steps{grid-column:1;grid-row:1;padding-bottom:14vh} #root .zh-home .b-story__stage{grid-column:2;grid-row:1} #root .zh-home .b-story__sticky{position:sticky;top:var(--head);height:calc(100svh - var(--head) - 34px);min-height:540px;max-height:960px} #root .zh-home .b-live{position:absolute;inset:0 0 64px;cursor:crosshair} #root .zh-home .b-live canvas{opacity:0;transition:opacity .18s ease} @keyframes b-fade{from{opacity:0}} #root .zh-home .b-glow{position:absolute;inset:10% 6% 18%;border-radius:50%;filter:blur(50px);opacity:0;transition:opacity .9s ease} #root .zh-home .b-glow--qr{background:radial-gradient(closest-side,rgba(61,102,234,.22),transparent)} #root .zh-home .b-glow--tag{background:radial-gradient(closest-side,rgba(255,138,74,.28),transparent)} #root .zh-home .b-glow--page{background:radial-gradient(closest-side,rgba(181,217,74,.36),transparent)} #root .zh-home .b-glow--scan{background:radial-gradient(closest-side,rgba(130,165,255,.34),transparent)} #root .zh-home [data-step-color=qr] .b-glow--qr,#root .zh-home [data-step-color=tag] .b-glow--tag,#root .zh-home [data-step-color=page] .b-glow--page,#root .zh-home [data-step-color=scan] .b-glow--scan{opacity:1} #root .zh-home .b-live__hint{position:absolute;left:8px;bottom:64px;display:flex;align-items:center;gap:10px;color:var(--muted);font:500 14px/1.2 Onest,sans-serif} #root .zh-home .b-live__hint span{width:9px;height:9px;border-radius:2px;background:var(--mandarin);animation:b-blink 1.6s ease-in-out infinite} @keyframes b-blink{50%{opacity:.25}} #root .zh-home .b-dots{position:absolute;right:0;bottom:12px;display:flex;gap:6px;padding:5px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px var(--line),0 14px 30px -20px rgba(17,25,51,.5)} #root .zh-home .b-dots a{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;border-radius:10px;color:var(--muted);font:600 13px/1 Onest,sans-serif;white-space:nowrap;transition:background .25s,color .25s} #root .zh-home .b-dots a i{width:8px;height:8px;border-radius:2px;background:currentColor;opacity:.5} #root .zh-home .b-dots a:hover{color:var(--ink)} #root .zh-home .b-dots a[aria-current]{background:var(--cobalt);color:#fff} #root .zh-home .b-dots a[aria-current] i{background:var(--lime);opacity:1} #root .zh-home .b-step{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-height:calc(100svh - var(--head));padding:56px 0;opacity:.32;transition:opacity .6s ease} #root .zh-home .b-step.is-active{opacity:1} #root .zh-home .b-step--intro{min-height:calc(100svh - var(--head) - 30px);padding-top:clamp(28px,4vw,56px)} #root .zh-home .b-chip{display:inline-flex;align-items:center;gap:10px;margin:0;padding:8px 15px 8px 11px;border-radius:999px;background:var(--lime-soft);color:#2f4310;font:600 14px/1.3 Onest,sans-serif} #root .zh-home .b-chip i{width:9px;height:9px;border-radius:2px;background:var(--lime-2);animation:b-blink 2s ease-in-out infinite} #root .zh-home .b-step--intro h1{margin-top:22px;font:600 clamp(40px,4.5vw,70px)/1.02 Unbounded,sans-serif;letter-spacing:-.055em} #root .zh-home .b-h1-accent{display:block;color:var(--cobalt)} #root .zh-home .b-lead{max-width:30em;margin:20px 0 26px;color:var(--muted);font-size:clamp(17px,1.35vw,19px);line-height:1.55} #root .zh-home .b-make{width:100%;max-width:560px} #root .zh-home .b-make label{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin-bottom:10px;font:650 16px/1.3 Onest,sans-serif} #root .zh-home .b-make label span{color:var(--cobalt);font-size:14px;font-weight:600} #root .zh-home .b-make__field{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 18px;border-radius:20px;background:#fff;box-shadow:0 0 0 1.5px var(--line),0 22px 44px -28px rgba(37,72,189,.5);transition:box-shadow .2s} #root .zh-home .b-make__field:focus-within{box-shadow:0 0 0 2px var(--cobalt),0 22px 44px -28px rgba(37,72,189,.6)} #root .zh-home .b-make input{flex:1;min-width:0;height:52px;border:0;outline:0;background:none;font-size:17px} #root .zh-home .b-make .b-btn{min-height:52px;padding:0 22px;border-radius:15px} #root .zh-home .b-make__note{min-height:22px;margin-top:8px;color:var(--muted);font-size:14px} #root .zh-home .b-search{display:flex;align-items:center;gap:10px;width:100%;max-width:560px;margin-top:14px;padding:0 6px 0 18px;border-radius:16px;background:var(--surface)} #root .zh-home .b-search:focus-within{background:#fff;box-shadow:inset 0 0 0 2px var(--cobalt)} #root .zh-home .b-search .icon{color:#8a90a0} #root .zh-home .b-search input{flex:1;min-width:0;height:50px;border:0;outline:0;background:none;font-size:16px} #root .zh-home .b-search button{min-height:38px;padding:0 16px;border:0;border-radius:11px;background:#fff;color:var(--cobalt);font:600 15px/1 Onest,sans-serif;box-shadow:0 0 0 1px var(--line)} #root .zh-home .b-qrkinds{display:flex;flex-wrap:wrap;gap:8px;width:100%;max-width:560px;margin-top:12px} #root .zh-home .b-qrkinds a{padding:8px 14px;border-radius:10px;background:var(--surface);color:#353d55;font:600 14px/1.2 Onest,sans-serif;transition:background .2s,color .2s} #root .zh-home .b-qrkinds a:hover{background:var(--cobalt-soft);color:var(--cobalt)} #root .zh-home .b-scrollcue{display:inline-flex;align-items:center;gap:10px;margin-top:22px;color:var(--muted);font:500 15px/1.3 Onest,sans-serif} #root .zh-home .b-scrollcue:hover{color:var(--cobalt)} #root .zh-home .b-scrollcue__dot{position:relative;width:22px;height:34px;border:2px solid currentColor;border-radius:12px;opacity:.7} #root .zh-home .b-scrollcue__dot::after{content:"";position:absolute;left:50%;top:7px;width:4px;height:7px;border-radius:2px;background:currentColor;transform:translateX(-50%);animation:b-wheel 1.6s ease-in-out infinite} @keyframes b-wheel{60%{transform:translate(-50%,9px);opacity:0}} #root .zh-home .b-step__num{display:inline-flex;align-items:center;gap:12px;margin-bottom:18px;color:var(--cobalt);font:600 13px/1.2 Onest,sans-serif;letter-spacing:.1em;text-transform:uppercase} #root .zh-home .b-step__num b{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--cobalt);color:#fff;font:600 14px/1 Unbounded,sans-serif;letter-spacing:-.02em} #root .zh-home [data-step=tag] .b-step__num b{background:var(--mandarin)} #root .zh-home [data-step=page] .b-step__num b{background:var(--lime-2);color:var(--ink)} #root .zh-home [data-step=scan] .b-step__num b{background:var(--ink)} #root .zh-home .b-step h2{max-width:13em;margin-bottom:18px} #root .zh-home .b-step__text{max-width:32em;margin-bottom:26px;color:var(--muted);font-size:18px;line-height:1.6} /* Связанные инструменты — рисунки прежней техники */ #root .zh-home .b-related{display:grid;width:100%;max-width:560px;margin-top:28px;border-top:1px solid var(--line)} #root .zh-home .b-related>span{padding:14px 0 4px;color:var(--muted);font:600 12px/1.2 Onest,sans-serif;letter-spacing:.08em;text-transform:uppercase} #root .zh-home .b-related a{display:grid;grid-template-columns:60px minmax(0,1fr) 18px;gap:14px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)} #root .zh-home .b-related img{width:60px;height:45px;object-fit:contain;transition:transform .35s cubic-bezier(.2,.8,.2,1)} #root .zh-home .b-related a:hover img{transform:scale(1.1) rotate(-3deg)} #root .zh-home .b-related b{display:block;font:650 16px/1.25 Onest,sans-serif} #root .zh-home .b-related small{display:block;margin-top:2px;color:var(--muted);font-size:14px} #root .zh-home .b-related a:hover b{color:var(--cobalt)} #root .zh-home .b-related .icon{width:18px;height:18px;color:var(--mandarin);stroke-width:2.2;transition:transform .2s} #root .zh-home .b-related a:hover .icon{transform:translateX(3px)} /* Sections */ #root .zh-home .b-section{padding-top:clamp(84px,9vw,132px)} #root .zh-home .b-head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:20px 56px;align-items:end;margin-bottom:28px} #root .zh-home .b-head__aside p{max-width:28em;color:var(--muted);font-size:18px;line-height:1.6} #root .zh-home .b-head__aside b{color:var(--ink)} #root .zh-home .b-subhead{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 20px;margin:4px 0 14px} #root .zh-home .b-subhead h3{font:600 clamp(19px,1.6vw,22px)/1.2 Unbounded,sans-serif;letter-spacing:-.04em} #root .zh-home .b-subhead>div{display:flex;align-items:center;gap:18px;min-height:36px} #root .zh-home .b-subhead a{display:inline-flex;align-items:center;gap:5px;color:var(--cobalt);font-weight:600;font-size:15px} #root .zh-home .b-subhead a .icon{width:15px;height:15px} #root .zh-home .b-subhead--grid{margin-top:8px} #root .zh-home .b-pause{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px 0 9px;border:0;border-radius:10px;background:var(--surface);color:#353d55;font:600 14px/1 Onest,sans-serif} #root .zh-home .b-pause .icon{width:16px;height:16px} #root .zh-home .b-pause .icon--play{display:none;fill:currentColor} #root .zh-home .b-pause[data-state=paused] .icon--play{display:block} #root .zh-home .b-pause[data-state=paused] .icon--pause{display:none} /* Classic 3D: the four live direction scenes */ #root .zh-home .b-scenes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:44px} #root .zh-home .b-scene{display:flex;flex-direction:column;border-radius:24px;background:#fff;box-shadow:0 0 0 1px var(--line);transition:translate .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s} #root .zh-home .b-scene:hover{translate:0 -4px;box-shadow:0 0 0 1.5px var(--cobalt),0 26px 44px -30px rgba(37,72,189,.7)} #root .zh-home .b-scene .direction-visual{margin:8px 8px 0;border-radius:18px;background:radial-gradient(110% 90% at 50% 0%,#fff 0%,var(--tint) 55%,#e6edff 100%);overflow:hidden} #root .zh-home .b-scene .direction-stage{height:clamp(176px,15vw,224px)} #root .zh-home .b-scene .direction-captions{padding:14px 16px 16px;min-height:max(82px,var(--direction-caption-height,0px))} #root .zh-home .b-scene .direction-caption b{font:650 17px/1.25 Onest,sans-serif} #root .zh-home .b-scene .direction-caption small{margin-top:4px;color:var(--muted);font-size:14px;line-height:1.4} #root .zh-home .b-scene .direction-link:hover b{color:var(--cobalt)} #root .zh-home .b-scene:not([data-cycling=true]) .direction-captions{gap:4px} #root .zh-home .b-scene:not([data-cycling=true]) .direction-link:not(:first-child) b{font-size:15px;font-weight:500;color:var(--cobalt)} #root .zh-home .b-scene[data-cycling=true] .direction-link:not([hidden]){animation:b-caption .5s cubic-bezier(.2,.8,.2,1)} @keyframes b-caption{from{opacity:0;transform:translateY(6px)}} /* Drawings: tools grid */ #root .zh-home .b-find{display:flex;align-items:center;gap:10px;width:min(100%,420px);padding:0 10px 0 18px;border-radius:14px;background:var(--surface)} #root .zh-home .b-find:focus-within{background:#fff;box-shadow:inset 0 0 0 2px var(--cobalt)} #root .zh-home .b-find .icon{color:#8a90a0} #root .zh-home .b-find input{flex:1;min-width:0;height:48px;border:0;outline:0;background:none;font-size:16px} #root .zh-home .b-find kbd{display:grid;place-items:center;width:26px;height:26px;border-radius:7px;background:#fff;color:var(--muted);font:500 13px/1 Onest,sans-serif} #root .zh-home .b-filter{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:16px} #root .zh-home .b-filter button{min-height:42px;padding:0 18px;border:0;border-radius:12px;background:var(--surface);color:#353d55;font:600 15px/1 Onest,sans-serif;transition:background .2s,color .2s} #root .zh-home .b-filter button:hover{background:#e9edf6} #root .zh-home .b-filter button[aria-pressed=true]{background:var(--ink);color:#fff} #root .zh-home .b-filter__count{margin-left:auto;color:var(--muted);font-size:15px} #root .zh-home .b-filter__count b{color:var(--ink)} #root .zh-home .b-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} #root .zh-home .b-card{display:grid;grid-template-columns:76px minmax(0,1fr) 20px;align-items:center;gap:16px;padding:14px 18px 14px 14px;border-radius:20px;background:#fff;box-shadow:0 0 0 1px var(--line);transition:translate .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s} #root .zh-home .b-card:hover{translate:0 -3px;box-shadow:0 0 0 1.5px var(--cobalt),0 22px 40px -28px rgba(37,72,189,.7)} #root .zh-home .b-card__art{display:grid;place-items:center;width:76px;height:68px;border-radius:16px;background:var(--surface)} #root .zh-home .b-card--read .b-card__art{background:var(--sky-soft)} #root .zh-home .b-card--create .b-card__art{background:var(--cobalt-soft)} #root .zh-home .b-card--business .b-card__art{background:var(--lime-soft)} #root .zh-home .b-card__art svg,#root .zh-home .b-card__art img{width:60px;height:auto;max-height:58px;transition:transform .35s cubic-bezier(.2,.8,.2,1)} #root .zh-home .b-card:hover .b-card__art svg,#root .zh-home .b-card:hover .b-card__art img{transform:scale(1.12) rotate(-4deg)} #root .zh-home .b-card__text{display:grid;gap:3px} #root .zh-home .b-card__text em{color:var(--cobalt);font:600 12px/1.2 Onest,sans-serif;font-style:normal;letter-spacing:.08em;text-transform:uppercase} #root .zh-home .b-card__text b{font:650 17px/1.25 Onest,sans-serif} #root .zh-home .b-card__text small{color:var(--muted);font-size:14px;line-height:1.4} #root .zh-home .b-card__go{width:20px;height:20px;color:var(--mandarin);stroke-width:2.2;transition:transform .2s} #root .zh-home .b-card:hover .b-card__go{transform:translateX(4px)} #root .zh-home .b-card--all{grid-column:1/-1;grid-template-columns:minmax(0,1fr) 28px;padding:24px 28px;background:radial-gradient(60% 140% at 100% 0%,#4d74ee,transparent 60%),var(--cobalt);color:#fff;box-shadow:none} #root .zh-home .b-card--all .b-card__text{grid-auto-flow:column;align-items:baseline;justify-content:start;gap:20px} #root .zh-home .b-card--all .b-card__text b{font:600 clamp(20px,2vw,26px)/1.2 Unbounded,sans-serif;letter-spacing:-.045em} #root .zh-home .b-card--all .b-card__text small{color:#d7e0fd;font-size:15px} #root .zh-home .b-card--all .b-card__go{width:28px;height:28px;color:var(--lime)} #root .zh-home .b-card--all:hover{box-shadow:0 26px 44px -28px rgba(37,72,189,.9)} #root .zh-home .no-results{padding:28px;border-radius:20px;background:var(--surface);color:var(--muted);text-align:center} /* Living pages band */ #root .zh-home .b-band-light{margin-top:clamp(84px,9vw,132px);padding:clamp(56px,7vw,104px) 0;background:radial-gradient(circle at 1px 1px,rgba(37,72,189,.1) 1px,transparent 1.5px) 0 0/26px 26px,var(--tint)} #root .zh-home .b-living{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(24px,5vw,72px);align-items:center} #root .zh-home .b-living__copy{display:flex;flex-direction:column;align-items:flex-start} #root .zh-home .b-living__copy h2{margin-bottom:16px} #root .zh-home .b-living__copy .b-copy{margin-bottom:22px} #root .zh-home #living-pages{font:inherit;color:inherit} #root .zh-home #living-pages .living-home-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%;margin:0 0 16px;padding:5px;border:0;border-radius:18px;background:#fff;box-shadow:0 0 0 1px var(--line)} #root .zh-home #living-pages [data-living-home-scene]{flex-direction:column;justify-content:center;gap:4px;min-height:76px;padding:8px;border:0;border-radius:14px;background:none;color:var(--muted);font:400 14px/1.3 Onest,sans-serif;text-align:center;transition:background .2s,color .2s} #root .zh-home #living-pages [data-living-home-scene] svg{width:30px;height:30px;flex-basis:30px;color:currentColor} #root .zh-home #living-pages [data-living-home-scene] b{font-size:15px;font-weight:650} #root .zh-home #living-pages [data-living-home-scene] small{display:none} #root .zh-home #living-pages [data-living-home-scene][aria-pressed=true]{background:var(--cobalt);color:#fff;border:0} #root .zh-home #living-pages [data-living-home-note]{flex:none;margin:0 0 20px;color:var(--muted);font-size:15px;line-height:1.55} #root .zh-home #living-pages .living-home-create{min-height:60px;padding:0 28px;border-radius:16px;background:linear-gradient(180deg,var(--mandarin-2) -50%,var(--mandarin) 60%);font:700 19px/1 Onest,sans-serif;box-shadow:0 14px 28px -16px rgba(244,95,28,.9)} #root .zh-home #living-pages .living-home-create::after{content:none} #root .zh-home #living-pages :is(.lc-save,.ls-open){background:var(--mandarin);box-shadow:none} #root .zh-home #living-pages .ls-categories button[aria-pressed=true]{background:var(--cobalt)} #root .zh-home #living-pages .living-home-stage,#root .zh-home #living-home-stage{display:grid;place-items:center;min-height:560px;padding:28px;border:0;border-radius:28px;background:#fff;box-shadow:0 0 0 1px var(--line),0 40px 80px -50px rgba(37,72,189,.55)} #root .zh-home #living-home-stage>p{max-width:22em;color:var(--muted);text-align:center} /* Examples */ #root .zh-home .b-demo-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:12px} #root .zh-home .b-demo-tabs button{display:flex;align-items:center;gap:14px;padding:12px 16px 12px 12px;border:0;border-radius:20px;background:#fff;box-shadow:0 0 0 1px var(--line);text-align:left;transition:box-shadow .2s,translate .2s} #root .zh-home .b-demo-tabs button:hover{translate:0 -2px} #root .zh-home .b-demo-tabs button[aria-selected=true]{box-shadow:0 0 0 2px var(--cobalt),0 18px 34px -24px rgba(37,72,189,.7)} #root .zh-home .b-demo-tabs img{width:64px;height:auto;flex:none;padding:6px;border-radius:14px;background:var(--surface)} #root .zh-home .b-demo-tabs b{display:block;font:650 17px/1.3 Onest,sans-serif} #root .zh-home .b-demo-tabs small{display:block;margin-top:2px;color:var(--muted);font-size:14px} #root .zh-home .b-demo{padding:clamp(22px,3vw,40px);border-radius:28px;background:#fff;box-shadow:0 0 0 1px var(--line),0 40px 80px -56px rgba(17,25,51,.5)} #root .zh-home .demo-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:clamp(20px,4vw,56px);align-items:center} #root .zh-home .demo-controls{display:flex;flex-direction:column} #root .zh-home .demo-controls h3{margin-bottom:22px;font:600 clamp(22px,2.2vw,30px)/1.12 Unbounded,sans-serif;letter-spacing:-.045em} #root .zh-home .demo-controls label{margin:14px 0 7px;color:var(--muted);font-size:14px;font-weight:600} #root .zh-home .demo-controls input{height:54px;padding:0 18px;border:0;border-radius:14px;background:var(--surface);font-size:17px;outline:0} #root .zh-home .demo-controls input:focus{background:#fff;box-shadow:inset 0 0 0 2px var(--cobalt)} #root .zh-home .btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:10px;align-self:flex-start;min-height:58px;margin-top:24px;padding:0 26px;border:0;border-radius:16px;background:linear-gradient(180deg,var(--mandarin-2) -50%,var(--mandarin) 60%);color:#fff;font:700 19px/1 Onest,sans-serif;box-shadow:0 14px 28px -16px rgba(244,95,28,.9)} #root .zh-home .btn-primary:disabled{opacity:.45;cursor:not-allowed} #root .zh-home .btn-primary .icon{width:20px;height:20px;stroke-width:2.2} #root .zh-home .demo-note{margin-top:12px;color:var(--muted);font-size:14px} #root .zh-home .demo-visual{position:relative;display:grid;place-items:center;min-height:430px;border-radius:22px;background:radial-gradient(circle at 1px 1px,rgba(37,72,189,.12) 1px,transparent 1.5px) 0 0/22px 22px,var(--tint);overflow:hidden} #root .zh-home .wifi-card,#root .zh-home .preview-label,#root .zh-home .catalog-phone{position:relative} #root .zh-home .wifi-card{display:grid;justify-items:center;gap:10px;width:min(240px,80%);padding:22px 20px 18px;border-radius:22px;background:#fff;box-shadow:0 30px 50px -30px rgba(17,25,51,.55);transform:rotate(-3deg)} #root .zh-home .wifi-symbol{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--lime);color:var(--ink)} #root .zh-home .wifi-symbol .icon{width:24px;height:24px} #root .zh-home .wifi-card b{font:600 18px/1.25 Unbounded,sans-serif;letter-spacing:-.04em;text-align:center} #root .zh-home .demo-qr{width:100%} #root .zh-home .demo-qr svg{width:100%;height:auto} #root .zh-home .wifi-card small,#root .zh-home .preview-label small{color:var(--muted);font-size:13px;text-align:center} #root .zh-home .preview-label{display:grid;gap:6px;width:min(290px,86%);padding:22px;border-radius:16px;background:#fff;box-shadow:0 30px 50px -30px rgba(17,25,51,.55);transform:rotate(-2deg)} #root .zh-home .preview-label b{font-size:18px} #root .zh-home .preview-label strong{font:600 36px/1.1 Unbounded,sans-serif;letter-spacing:-.05em} #root .zh-home .label-barcode svg{width:100%;height:auto} #root .zh-home .catalog-phone{display:grid;gap:10px;width:min(240px,80%);padding:34px 14px 16px;border-radius:32px;background:#fff;box-shadow:0 0 0 7px var(--ink),0 34px 54px -30px rgba(17,25,51,.6)} #root .zh-home .phone-island{position:absolute;top:12px;left:50%;width:62px;height:9px;border-radius:9px;background:var(--ink);transform:translateX(-50%)} #root .zh-home .catalog-title{font:600 15px/1.2 Unbounded,sans-serif;letter-spacing:-.03em} #root .zh-home .catalog-items{display:grid;gap:8px} #root .zh-home .catalog-item{display:flex;align-items:center;gap:10px;padding:8px;border-radius:12px;background:var(--surface)} #root .zh-home .catalog-item b{display:block;font-size:14px;line-height:1.25} #root .zh-home .catalog-item small{color:var(--cobalt);font-size:14px;font-weight:600} #root .zh-home .catalog-thumb{width:44px;height:44px;flex:none;border-radius:8px;background:#fff;object-fit:cover} #root .zh-home .thumb-mug{background:radial-gradient(circle at 46% 56%,#7f9c8f 0 30%,transparent 31%),#fff} #root .zh-home .thumb-tray{background:radial-gradient(circle,#e8c79e 0 34%,#d7b07f 35% 41%,transparent 42%),#fff} #root .zh-home .phone-cta{padding:10px;border-radius:10px;background:var(--lime);color:var(--ink);font-size:13px;font-weight:600;text-align:center} /* Business band */ #root .zh-home .b-band{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;padding:clamp(32px,5vw,72px);border-radius:32px;background:radial-gradient(80% 120% at 100% 0%,#4b72ee 0%,transparent 60%),linear-gradient(135deg,var(--cobalt),#1a338f);color:#fff;overflow:hidden} #root .zh-home .b-pixels{position:absolute;right:4%;top:6%;width:96px;height:96px;opacity:.9;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='0' y='0' width='14' height='14' rx='3' fill='%23cfe86f'/%3E%3Crect x='16' y='16' width='14' height='14' rx='3' fill='%23ffffff' fill-opacity='.9'/%3E%3Crect x='32' y='0' width='14' height='14' rx='3' fill='%23f45f1c'/%3E%3Crect x='48' y='16' width='14' height='14' rx='3' fill='%23cfe86f'/%3E%3Crect x='16' y='48' width='14' height='14' rx='3' fill='%23d3e0ff'/%3E%3Crect x='32' y='32' width='14' height='14' rx='3' fill='%23ffffff' fill-opacity='.5'/%3E%3C/svg%3E") center/contain no-repeat} #root .zh-home .b-band__copy{position:relative;display:flex;flex-direction:column;align-items:flex-start} #root .zh-home .b-band__copy h2{margin-bottom:18px;color:#fff;font-size:clamp(30px,3.6vw,52px)} #root .zh-home .b-band__text{max-width:32em;color:#dce4fb;font-size:18px;line-height:1.6} #root .zh-home .b-band__fine{margin:14px 0 28px;color:#cbd5f7;font-size:14px;line-height:1.55} #root .zh-home .b-band__art{position:relative;min-height:460px} #root .zh-home .b-paper{position:absolute;top:0;left:0;width:60%;padding:22px;border-radius:16px;background:#fff;color:var(--ink);box-shadow:0 30px 60px -30px rgba(5,12,40,.7);transform:rotate(-5deg)} #root .zh-home .b-paper span{display:block;margin-bottom:8px;color:var(--muted);font:600 12px/1 Onest,sans-serif;letter-spacing:.1em;text-transform:uppercase} #root .zh-home .b-paper div{display:flex;justify-content:space-between;padding:10px 0;border-top:1px solid var(--line);font-size:15px} #root .zh-home .b-paper b{font-weight:600} #root .zh-home .b-paper em{display:block;margin-top:8px;color:var(--cobalt);font:600 13px/1.3 Onest,sans-serif;font-style:normal} #root .zh-home .b-label-card{position:absolute;left:8%;bottom:0;z-index:2;display:grid;gap:4px;width:44%;padding:16px 18px;border-radius:12px;background:#fff;color:var(--ink);box-shadow:0 30px 60px -28px rgba(5,12,40,.75);transform:rotate(3deg)} #root .zh-home .b-label-card b{font-size:15px} #root .zh-home .b-label-card strong{font:600 30px/1.1 Unbounded,sans-serif;letter-spacing:-.05em} #root .zh-home .b-label-card span svg{width:100%;height:auto} #root .zh-home .b-phone{position:absolute;right:0;top:4%;z-index:1;display:grid;gap:6px;width:38%;padding:30px 12px 14px;border-radius:30px;background:#fff;color:var(--ink);box-shadow:0 0 0 6px var(--ink),0 40px 70px -30px rgba(5,12,40,.8);transform:rotate(6deg)} #root .zh-home .b-phone__island{position:absolute;top:11px;left:50%;width:54px;height:8px;border-radius:8px;background:var(--ink);transform:translateX(-50%)} #root .zh-home .b-phone__brand{color:var(--cobalt);font:600 12px/1 Unbounded,sans-serif;letter-spacing:-.03em} #root .zh-home .b-phone img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:14px;background:var(--surface)} #root .zh-home .b-phone b{font-size:15px} #root .zh-home .b-phone strong{font:600 20px/1.1 Unbounded,sans-serif;letter-spacing:-.04em} #root .zh-home .b-phone__cta{padding:8px;border-radius:8px;background:var(--lime);color:var(--ink);font-size:12px;font-weight:600;text-align:center} /* Passports */ #root .zh-home .b-head--pass{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:end} #root .zh-home .b-head--pass .b-copy{max-width:34em;margin-top:16px} #root .zh-home .b-price{display:grid;gap:8px;justify-items:start;padding:24px;border-radius:24px;background:var(--tint)} #root .zh-home .b-price strong{color:var(--cobalt);font:600 clamp(34px,3.4vw,48px)/1 Unbounded,sans-serif;letter-spacing:-.06em} #root .zh-home .b-price>span{color:var(--muted);font-size:15px} #root .zh-home .b-price .b-actions{margin-top:10px} #root .zh-home .b-pass{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px} #root .zh-home .b-sol{display:grid;align-content:start;gap:6px;padding:10px 10px 20px;border-radius:24px;background:#fff;box-shadow:0 0 0 1px var(--line);transition:translate .25s,box-shadow .25s} #root .zh-home .b-sol:hover{translate:0 -3px;box-shadow:0 0 0 1.5px var(--cobalt),0 24px 44px -30px rgba(37,72,189,.7)} #root .zh-home .b-sol__art{display:grid;place-items:center;height:172px;margin-bottom:10px;border-radius:18px;background:radial-gradient(circle at 1px 1px,rgba(37,72,189,.12) 1px,transparent 1.5px) 0 0/18px 18px,var(--tint);overflow:hidden} #root .zh-home .b-sol__art img{width:auto;height:130px;transition:transform .35s cubic-bezier(.2,.8,.2,1)} #root .zh-home .b-sol__art--photo{background:#eceff3} #root .zh-home .b-sol__art--photo img{width:100%;height:100%;object-fit:contain} #root .zh-home .b-sol:hover .b-sol__art img{transform:scale(1.05)} #root .zh-home .b-sol__num{padding:0 8px;color:var(--cobalt);font:600 13px/1 Unbounded,sans-serif} #root .zh-home .b-sol b{padding:0 8px;font:650 18px/1.25 Onest,sans-serif} #root .zh-home .b-sol small{padding:0 8px;color:var(--muted);font-size:14px} /* How it works */ #root .zh-home .b-how{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none} #root .zh-home .b-how li{display:grid;align-content:start;gap:12px;padding:24px;border-radius:24px;background:var(--surface)} #root .zh-home .b-how__px{width:34px;height:34px;border-radius:9px;background:var(--cobalt);box-shadow:16px 16px 0 -6px var(--lime)} #root .zh-home .b-how li:nth-child(2) .b-how__px{background:var(--mandarin);box-shadow:16px 16px 0 -6px var(--sky)} #root .zh-home .b-how li:nth-child(3) .b-how__px{background:var(--lime-2);box-shadow:16px 16px 0 -6px var(--cobalt)} #root .zh-home .b-how li:nth-child(4) .b-how__px{background:var(--ink);box-shadow:16px 16px 0 -6px var(--mandarin)} #root .zh-home .b-how h3{margin-top:8px;font:600 clamp(18px,1.5vw,21px)/1.2 Unbounded,sans-serif;letter-spacing:-.04em} #root .zh-home .b-how p{color:var(--muted);font-size:15px;line-height:1.6} #root .zh-home .b-how__links{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:22px;font-size:15px} #root .zh-home .b-how__links span{width:100%;color:var(--muted);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase} /* Help */ #root .zh-home .b-help{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,5vw,88px);align-items:start} #root .zh-home .b-help__works h2{margin-bottom:24px} #root .zh-home .b-help__links{display:grid;gap:8px;margin-bottom:22px} #root .zh-home .b-help__links a{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--line);font:600 17px/1.3 Onest,sans-serif;transition:box-shadow .2s} #root .zh-home .b-help__links a:hover{box-shadow:0 0 0 1.5px var(--cobalt)} #root .zh-home .b-help__links .icon{width:20px;height:20px;color:var(--mandarin);stroke-width:2.2;transition:transform .2s} #root .zh-home .b-help__links a:hover .icon{transform:translateX(4px)} #root .zh-home .b-faq{padding:6px 26px;border-radius:24px;background:var(--surface)} #root .zh-home .b-faq details{border-top:1px solid var(--line)} #root .zh-home .b-faq details:first-child{border-top:0} #root .zh-home .b-faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 0;font:650 18px/1.35 Onest,sans-serif;list-style:none;cursor:pointer} #root .zh-home .b-faq summary::-webkit-details-marker{display:none} #root .zh-home .b-faq summary::after{content:"";flex:none;width:32px;height:32px;border-radius:9px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 5v10M5 10h10' fill='none' stroke='%23111933' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/16px no-repeat;transition:transform .25s,background-color .2s} #root .zh-home .b-faq details[open] summary::after{transform:rotate(45deg);background-color:var(--lime)} #root .zh-home .b-faq details p{margin:-6px 0 20px;color:var(--muted)} /* Closing: classic 3D still life with the flip card */ #root .zh-home .b-closing{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:24px 40px;margin-top:clamp(84px,9vw,132px);padding:clamp(28px,4vw,56px);border-radius:32px;background:radial-gradient(circle at 1px 1px,rgba(37,72,189,.1) 1px,transparent 1.5px) 0 0/24px 24px,var(--tint);overflow:hidden} #root .zh-home .b-closing__copy{display:flex;flex-direction:column;align-items:flex-start} #root .zh-home .b-closing h2{margin-bottom:14px;font-size:clamp(32px,4vw,58px)} #root .zh-home .b-closing .b-copy{margin-bottom:26px} #root .zh-home .b-still{margin:0} #root .zh-home .b-still__stage{position:relative;aspect-ratio:3/2} #root .zh-home .b-still__render{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply} #root .zh-home .b-flip{position:absolute;left:44.75%;top:16.9%;width:35.3%;aspect-ratio:224/285;padding:0;border:0;background:none;container-type:inline-size;perspective:1200px;transform:rotate(8deg);transition:transform .3s} #root .zh-home .b-flip:hover{transform:rotate(5deg) translateY(-2%)} #root .zh-home .b-flip__face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9.6cqw;padding:19.8cqw 11.3cqw 14.2cqw;border-radius:7cqw;background:#fff;box-shadow:0 11.3cqw 19.8cqw -11.3cqw rgba(17,25,51,.45),inset 0 0 0 1px rgba(17,25,51,.05);backface-visibility:hidden;transition:transform .7s cubic-bezier(.3,.7,.2,1)} #root .zh-home .b-flip__back{transform:rotateY(180deg);background:var(--ink);color:#fff} #root .zh-home .b-flip[aria-pressed=true] .b-flip__front{transform:rotateY(-180deg)} #root .zh-home .b-flip[aria-pressed=true] .b-flip__back{transform:rotateY(0)} #root .zh-home .b-flip__qr{width:62%} #root .zh-home .b-flip__qr svg,#root .zh-home .b-flip__barcode svg{width:100%;height:auto} #root .zh-home .b-flip b{font:600 6.9cqw/1.25 Unbounded,sans-serif;letter-spacing:-.04em;text-align:center} #root .zh-home .b-flip small{display:inline-flex;align-items:center;gap:2.3cqw;color:var(--muted);font-size:5cqw;white-space:nowrap} #root .zh-home .b-flip small .icon{width:6.2cqw;height:6.2cqw} #root .zh-home .b-flip__back small{color:#c9d0e2} #root .zh-home .b-flip__barcode{width:74%;padding:8.5cqw;border-radius:5.7cqw;background:#fff} /* Footer */ #root .zh-home .b-footer{margin-top:clamp(84px,9vw,132px);padding:clamp(44px,5vw,72px) 0 28px;background:var(--surface)} #root .zh-home .b-footer__in{display:grid;grid-template-columns:1.3fr repeat(3,minmax(0,1fr));gap:32px} #root .zh-home .b-footer__brand p{max-width:22em;margin:18px 0 16px;color:var(--muted);font-size:15px;line-height:1.6} #root .zh-home .b-footer nav{display:grid;align-content:start;gap:11px} #root .zh-home .b-footer nav b{margin-bottom:6px;font-size:15px} #root .zh-home .b-footer nav a{color:var(--muted);font-size:15px} #root .zh-home .b-footer nav a:hover{color:var(--cobalt)} #root .zh-home .b-footer__legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;margin-top:44px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:14px} #root .zh-home .b-footer__legal nav{display:flex;flex-wrap:wrap;gap:8px 22px} @media (prefers-reduced-motion:reduce){#root .zh-home .b-step{opacity:1}} /* Tablet */ @media (max-width:1100px){ #root .zh-home .b-nav,#root .zh-home .b-textlink{display:none} #root .zh-home .b-menu-btn{display:grid} #root .zh-home .b-head,#root .zh-home .b-head--pass,#root .zh-home .b-living,#root .zh-home .b-help,#root .zh-home .b-band,#root .zh-home .b-closing{grid-template-columns:minmax(0,1fr)} #root .zh-home .b-scenes{grid-template-columns:repeat(2,minmax(0,1fr))} #root .zh-home .b-cards{grid-template-columns:repeat(2,minmax(0,1fr))} #root .zh-home .b-pass,#root .zh-home .b-how{grid-template-columns:repeat(2,minmax(0,1fr))} #root .zh-home .b-footer__in{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:900px){ #root .zh-home .b-story{grid-template-columns:minmax(0,1fr)} #root .zh-home .b-story__stage{position:sticky;top:var(--head);z-index:2;grid-column:1;grid-row:1;height:40svh;min-height:290px;margin-inline:calc(-1*var(--pad));background:#fff;box-shadow:0 14px 24px -22px rgba(17,25,51,.45)} #root .zh-home .b-story__sticky{position:relative;top:0;height:100%;min-height:0} #root .zh-home .b-live{inset:0 0 52px} #root .zh-home .b-live__hint{display:none} #root .zh-home .b-dots{left:50%;right:auto;bottom:8px;transform:translateX(-50%)} #root .zh-home .b-dots a{padding:0 10px} #root .zh-home .b-story__steps{grid-row:2;padding-bottom:6vh} #root .zh-home .b-step{justify-content:flex-start;min-height:64svh;padding:28px 0 56px;opacity:1;scroll-margin-top:max(40svh,290px)} #root .zh-home .b-step--intro{min-height:0;padding-top:12px} } /* Телефон: главная начинается со сканера — на телефоне это самая частая задача (решение владельца 25.10.2026). Порядок в HTML прежний: H1 первым для роботов и чтения с экрана; визуально шаг «Сканер» поднимается над вступлением. */ @media (max-width:700px){ #root .zh-home .b-story__stage{height:36svh;min-height:260px} #root .zh-home .b-step{scroll-margin-top:max(36svh,260px)} #root .zh-home .b-story__steps{display:flex;flex-direction:column} #root .zh-home .b-step[data-step=scan]{order:-1;min-height:0;padding:22px 0 40px} #root .zh-home .b-step[data-step=scan] .b-step__num b{font-size:0;background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 8.5A2.5 2.5 0 0 1 6.5 6H8l1.6-2h4.8L16 6h1.5A2.5 2.5 0 0 1 20 8.5v8a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 4 16.5Z' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='12.5' r='3.6' fill='none' stroke='%23cfe86f' stroke-width='1.8'/%3E%3C/svg%3E") center/22px no-repeat} #root .zh-home .b-step--intro{padding-top:30px;border-top:1px solid var(--line)} #root .zh-home .b-dots a[data-dot=scan]{order:-1} #root .zh-home .b-scrollcue{display:none} } /* Phone */ @media (max-width:640px){ #root .zh-home{font-size:16px;--head:64px} #root .zh-home h2{font-size:clamp(26px,7.6vw,32px)} #root .zh-home .b-header__in{gap:10px} #root .zh-home .b-brand{font-size:17px} #root .zh-home .b-brand svg{width:28px;height:28px} #root .zh-home .b-header__actions{gap:8px} #root .zh-home .b-header__actions .b-btn{display:none} #root .zh-home .b-cam{width:48px;padding:0;justify-content:center} #root .zh-home .b-cam span{display:none} #root .zh-home .b-step--intro h1{margin-top:16px;font-size:clamp(31px,10.2vw,46px)} #root .zh-home .b-lead{font-size:17px} #root .zh-home .b-make label span{display:none} #root .zh-home .b-make .b-btn{padding:0 16px} #root .zh-home .b-step__text{font-size:16px} #root .zh-home .b-related img{width:52px;height:39px} #root .zh-home .b-related a{grid-template-columns:52px minmax(0,1fr) 18px;gap:12px} #root .zh-home .b-dots a span{display:none} #root .zh-home .b-dots a{min-height:30px;padding:0 10px} #root .zh-home .b-dots a[aria-current] span{display:inline} #root .zh-home .b-head__aside p,#root .zh-home .b-copy{font-size:16px} #root .zh-home .b-scenes{gap:10px} #root .zh-home .b-scene{border-radius:20px} #root .zh-home .b-scene .direction-visual{margin:6px 6px 0;border-radius:15px} #root .zh-home .b-scene .direction-stage{height:128px} #root .zh-home .b-scene .direction-captions{padding:10px 12px 14px;min-height:max(72px,var(--direction-caption-height,0px))} #root .zh-home .b-scene .direction-caption b{font-size:15px} #root .zh-home .b-scene .direction-caption small{font-size:13px} #root .zh-home .b-find{width:100%} #root .zh-home .b-filter{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(-1*var(--pad));padding-inline:var(--pad);scrollbar-width:none} #root .zh-home .b-filter button{flex:none} #root .zh-home .b-filter__count{display:none} #root .zh-home .b-cards{grid-template-columns:minmax(0,1fr)} #root .zh-home .b-card{grid-template-columns:64px minmax(0,1fr) 18px;gap:14px;padding:10px 14px 10px 10px} #root .zh-home .b-card__art{width:64px;height:58px} #root .zh-home .b-card__art svg,#root .zh-home .b-card__art img{width:50px} #root .zh-home .b-card--all{grid-template-columns:minmax(0,1fr) 24px;padding:20px} #root .zh-home .b-card--all .b-card__text{grid-auto-flow:row;gap:6px} #root .zh-home #living-pages .living-home-stage,#root .zh-home #living-home-stage{min-height:460px;padding:12px} #root .zh-home .b-demo-tabs{display:flex;overflow-x:auto;margin-inline:calc(-1*var(--pad));padding:2px var(--pad) 8px;scrollbar-width:none} #root .zh-home .b-demo-tabs button{flex:0 0 240px} #root .zh-home .demo-layout{grid-template-columns:minmax(0,1fr)} #root .zh-home .demo-visual{min-height:320px} #root .zh-home .b-band__art{min-height:300px} #root .zh-home .b-paper{display:none} #root .zh-home .b-phone{top:0;width:46%} #root .zh-home .b-label-card{left:0;top:22%;bottom:auto;width:56%} #root .zh-home .b-pass{grid-template-columns:1fr 1fr;gap:10px} #root .zh-home .b-sol__art{height:112px} #root .zh-home .b-sol__art img{height:86px} #root .zh-home .b-sol b{font-size:15px} #root .zh-home .b-sol small{font-size:13px} #root .zh-home .b-how{grid-template-columns:minmax(0,1fr)} #root .zh-home .b-faq{padding:4px 18px} #root .zh-home .b-faq summary{font-size:17px} #root .zh-home .b-closing{padding:24px 18px} #root .zh-home .b-footer__in{grid-template-columns:1fr 1fr;gap:28px 20px} #root .zh-home .b-footer__brand{grid-column:1/-1} } /* Длинные надписи на кнопках переносятся, а не выталкивают страницу вбок */ @media (max-width:420px){ #root .zh-home .b-btn{max-width:100%;white-space:normal;line-height:1.2;text-align:center} #root .zh-home .b-btn--lg{padding-block:12px} } @media (max-width:360px){ #root .zh-home .b-pass,#root .zh-home .b-scenes{grid-template-columns:minmax(0,1fr)} } /* Production-only bridges: source search results and lazy graphics fallback. */ #root .zh-home .home-discovery{display:block;padding:0;margin:0;max-width:none}#root .zh-home .discovery-results{margin-top:12px;padding:16px;border:1px solid var(--line);border-radius:16px;background:#fff}#root .zh-home .discovery-matches{display:grid;gap:8px}#root .zh-home .discovery-matches a{display:grid;gap:4px;padding:12px;background:var(--tint);border-radius:12px}#root .zh-home .discovery-matches span{color:var(--muted);font-size:14px}#root .zh-home .discovery-all{display:block;margin-top:10px;color:var(--cobalt)}#root .zh-home .zh-live-fallback{position:absolute;inset:0;display:block;transition:opacity .18s ease}#root .zh-home .zh-live-poster{display:block;width:100%;height:100%;object-fit:contain}#root .zh-home #live-code[data-live="ready"] .zh-live-fallback{opacity:0;visibility:hidden;transition:opacity .18s ease,visibility 0s .18s}#root .zh-home #live-code[data-live="ready"] canvas{opacity:1}#root .zh-home .home-recent{padding-block:30px}#root .zh-home .home-recent h2{font-size:24px;margin-bottom:18px}#root .zh-home .home-recent nav{display:flex;gap:14px;flex-wrap:wrap}#root .zh-home .home-recent a{color:var(--cobalt);text-decoration:underline}#root .zh-home .tool-card[hidden]{display:none!important} /* This home replaces the legacy layout while its app islands keep their routes. */ #root .home-start.zh-home{width:100%;max-width:none;margin:0;padding:0;overflow:visible}#root .zh-home .b-how__links{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:18px;font-size:14px;color:var(--cobalt)} #root .zh-home .home-discovery{width:100%} @media(prefers-reduced-motion:reduce){#root .zh-home .b-live canvas,#root .zh-home .zh-live-fallback{transition:none!important}} /* The approved models are present even before the animation engine arrives. */ #root .zh-home .direction-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}#root .zh-home .direction-stage[data-rendered="true"] .direction-poster{visibility:hidden}