/* Space UI, 16 Oct 2026. The owner: "кнопки какие-то интересные, белые, может как сай-фай; посмотри топовые студии по
   WebGL". From Abeto's Igloo Inc (Awwwards case study): labels that decode letter by letter and crisp state changes.
   Not taken: its glitch, chromatic aberration and particles (house rules). Loaded last on every page.
   A button is a solid pill in the room's own ink: white on the deep rooms, deep navy on light ones; no rim, no plate
   behind it. On hover a band of light crosses it once (.7 s, the clear curve), the label decodes from left to right
   (js/space-ui.js) and the arrow leaves through its corner and comes back; a press settles it (.25 s). */
:root{--ui-bg:#12151b;--ui-fg:#ffffff;--ui-band:rgba(255,255,255,.3)}
:root[data-theme=dark]{--ui-bg:#ffffff;--ui-fg:#12151b;--ui-band:rgba(126,129,135,.34)}
html:is(.space-on,.airy):not([data-theme=dark]) :is(#design-bottom,#principles,#services,#about){--ui-bg:#ffffff;--ui-fg:#12151b;--ui-band:rgba(126,129,135,.34)}
html body :is(.text-button,.svc-cta,.years-more,.back-top,.oisy-live-link,.osbb-source-link,.footer-top .footer-contact):not(#_u){
 background:var(--ui-bg)!important;background-image:none!important;color:var(--ui-fg)!important;
 backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important;overflow:hidden;
 transition:transform .25s cubic-bezier(.16,1,.3,1),background-color .25s cubic-bezier(.16,1,.3,1)!important}
html body[data-page=approach] :is(.svc-stack,.svc-show) .svc-cta:not(#_u){background:var(--ui-bg)!important;background-image:none!important}
html body :is(.text-button,.svc-cta,.years-more,.back-top,.oisy-live-link,.osbb-source-link,.footer-top .footer-contact):not(#_u)::before{display:none!important}
/* One hover (20 Oct): the buttons answer only through the cells of css/micro-2026.css and js/micro-2026.js. The band of
   light, the arrow leaving through its corner and the decoding label ran on top of the cells: four answers at once, and
   the decode's span took .text-button span's 26 px (css/redesign.css), so a hovered button swelled from 254 to 422 px */
html body :is(.text-button,.svc-cta,.years-more,.back-top,.oisy-live-link,.osbb-source-link,.footer-top .footer-contact):not(#_u)::after{display:none!important}
html body :is(.text-button,.svc-cta,.years-more,.back-top,.oisy-live-link,.osbb-source-link,.footer-top .footer-contact):not(#_u)>*{position:relative;z-index:1}
html body :is(.text-button,.svc-cta,.years-more,.back-top,.oisy-live-link,.osbb-source-link,.footer-top .footer-contact):not(#_u) .ui-arrow{stroke:currentColor}
@media (hover:hover) and (pointer:fine){
 html body :is(.text-button,.svc-cta,.years-more,.back-top,.oisy-live-link,.osbb-source-link,.footer-top .footer-contact):not(#_u):hover{transform:none;background:var(--ui-bg)!important;background-image:none!important;color:var(--ui-fg)!important}
 html body[data-page=approach] :is(.svc-stack,.svc-show) .svc-cta:not(#_u):hover{background-image:none!important}
}
html body :is(.text-button,.svc-cta,.years-more,.back-top,.oisy-live-link,.osbb-source-link,.footer-top .footer-contact):not(#_u):active{transform:scale(.97)}
html body :is(.text-button,.svc-cta,.years-more,.back-top,.oisy-live-link,.osbb-source-link,.footer-top .footer-contact):not(#_u):focus-visible{outline:2px solid var(--ui-bg);outline-offset:4px}
@keyframes ui-band{0%{opacity:1;transform:translateX(-140%) skewX(-18deg)}100%{opacity:1;transform:translateX(360%) skewX(-18deg)}}
@keyframes ui-arrow{0%{transform:none;opacity:1}44%{transform:translate(80%,-80%);opacity:0}45%{transform:translate(-80%,80%);opacity:0}100%{transform:none;opacity:1}}
/* One hover per element (17 Oct). The owner: "с ховерами проблема, накладываются друг на друга". The decode list in
   js/space-ui.js (BUTTONS + LINKS) and the lists here are now the same; .nav-links>a and .wo-open had been left out of
   this block, so they kept the older rolling label of js/portfolio-motion.js while the decode ran on top of it.
   The rolling label gives way to the decode everywhere the decode runs: one motion per hover. */
html body :is(.text-button,.svc-cta,.years-more,.back-top,.case-back,.oisy-live-link,.osbb-source-link,.footer-top .footer-contact,.nav-contact,.nav-links>a,.wo-open):not(#_u) .roll-label>span{transform:none!important;transition:none!important}
html body :is(.text-button,.svc-cta,.years-more,.back-top,.case-back,.oisy-live-link,.osbb-source-link,.footer-top .footer-contact,.nav-contact,.nav-links>a,.wo-open):not(#_u) .roll-label>span[aria-hidden]{display:none!important}
/* The earlier generations (dntsn.webflow.css, portfolio-polish-v54.css, portfolio-craft.css, chapters.css, redesign.css)
   still carry their own hover on these same elements: an underline that grows, a background swap, a lift. Stacked under
   the decode they read as two or three hovers at once. The decode and the band are the hover here, so those are stood
   down on exactly the elements this file owns — and nowhere else. */
@media (hover:hover) and (pointer:fine){
 html body :is(.nav-contact,.nav-links>a,.wo-open):not(#_u):hover{text-decoration:none!important;background-image:none!important;transform:none!important;letter-spacing:inherit!important}
 html body :is(.nav-contact,.nav-links>a,.wo-open):not(#_u)::before,
 html body :is(.nav-contact,.nav-links>a,.wo-open):not(#_u):hover::before{transform:none!important;opacity:0!important;animation:none!important}
 html body :is(.nav-links>a,.wo-open):not(#_u):hover::after{animation:none!important}
}
/* Back links are labels, not buttons (the owner, 17 Oct: «подписи где эбаут как кнопка не красивая»). «About Dmytro»
   on the CV and «All work» on the cases were solid pills, the same weight as the page's one real action. Now a quiet
   line of text in the room's ink with a back arrow before it: on hover the arrow steps back and the label decodes
   (it moved from BUTTONS to LINKS in js/space-ui.js). */
html body .case-back:not(#_u){display:inline-flex!important;align-items:center;gap:.6em;width:auto!important;height:auto!important;min-height:0!important;
 padding:4px 0!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;color:inherit!important;
 -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
 font-size:15px!important;line-height:1.3!important;letter-spacing:0!important;text-decoration:none!important;opacity:.74;transition:opacity .25s cubic-bezier(.16,1,.3,1)!important}
html body .case-back:not(#_u)::before{content:'←'!important;display:inline-block!important;position:static!important;width:auto!important;height:auto!important;
 background:none!important;opacity:1!important;transform:none;transition:transform .7s cubic-bezier(.16,1,.3,1)!important;
 -webkit-mask:none!important;mask:none!important;border:0!important}   /* an older ring mask on ::before cut the arrow out */
html body .case-back:not(#_u)::after{display:none!important}
@media (hover:hover) and (pointer:fine){
 html body .case-back:not(#_u):hover{opacity:1}
 html body .case-back:not(#_u):hover::before{transform:translateX(-5px)!important}
}
html body .case-back:not(#_u):focus-visible{outline:2px solid currentColor;outline-offset:4px;opacity:1}
@media (prefers-reduced-motion:reduce){html body .case-back:not(#_u)::before{transition:none!important}}
/* the decoding label keeps its width, so nothing beside it moves */
.ui-label{display:inline-block;white-space:pre}
@media (prefers-reduced-motion:reduce){html body :is(.text-button,.svc-cta,.years-more,.back-top,.oisy-live-link,.osbb-source-link,.footer-top .footer-contact,.nav-contact):not(#_u):hover :is(.ui-arrow),html body :is(.text-button,.svc-cta,.years-more,.back-top,.oisy-live-link,.osbb-source-link,.footer-top .footer-contact):not(#_u):hover::after{animation:none}}

/* Work: the cards show the products' own screens (images/space-hero), whole, with no plate behind them and no device
   around them (owner: "не люблю рамки на плашках"; the same screens as the homepage grid and the case openers) */
html body[data-page=work] .work-grid .work-card:nth-child(n) .work-image:not(#_u){background:none!important;aspect-ratio:auto!important;height:auto!important;border-radius:16px;overflow:hidden}
html body[data-page=work] .work-grid .work-card:nth-child(n) .work-image:not(#_u)>img{position:static!important;width:100%!important;height:auto!important;max-height:none!important;object-fit:contain!important;aspect-ratio:auto!important;transform:none}
/* a row of three phones stands at a phone's scale, not stretched to a desktop card's width */
html body[data-page=work] .work-grid .work-card:is([data-case="arcteryx-conditions"],[data-case="ikea-obegransad"],[data-case="rimowa-patina"],[data-case="walkman-hotline"],[data-case="dozor-ivano-frankivsk"],[data-case="solarman-smart"],[data-case="cover-shift-swaps"],[data-case="highpoint-bouldering"],[data-case="level-step-free"],[data-case="proof-sourdough"],[data-case="vikno-power-cuts"],[data-case="qr-ticket"],[data-case="toolkit-home"],[data-case="permission-manager"]) .work-image:not(#_u){max-width:min(100%,880px);margin-inline:auto}
/* About, career panels: the work strip shows the screens themselves, cut to the strip from their top, no plate */
html body .cr-shot .chapter-media:not(#_u){background:none!important}
html body .cr-shot .chapter-media:not(#_u) img{object-fit:cover!important;object-position:top center!important}

/* ---- Type over the world (17 Oct, pass 2; the owner: «доработать типографику») ----------------------------------
   Measured on home, CV, About and a case (work/space/qa/type-audit.js): one family (Basel) at one weight, so the
   hierarchy is size and ink alone; headings broke where the box ran out (no balance), paragraphs left one word on the
   last line («handoff.»), the secondary ink was a fixed slate (#56595f) that went weak over the bright deck and the sea,
   case body copy sat at 15 px, years and counts used proportional figures. */
html:is(.space-on,.airy,.room-live) :is(h1,h2,h3,.wo-title,.case-role,.cv-profession){text-wrap:balance}
html:is(.space-on,.airy,.room-live) :is(p,li,figcaption){text-wrap:pretty;font-kerning:normal}
/* the secondary ink follows the room's own ink at a fixed share, so it keeps its contrast over any frame */
html:is(.space-on,.airy,.room-live):not([data-theme=dark]){--muted:rgba(21,24,30,.72)}
html:is(.space-on,.airy,.room-live)[data-theme=dark]{--muted:rgba(240,243,249,.72)}
/* figures that are compared or counted line up */
html:is(.space-on,.airy,.room-live) :is(.year-names,.years-lede,.case-role,.cv-experience time,.experience-number,.wo-line){font-variant-numeric:tabular-nums}
/* case body copy: 17 px on a real measure (it sat at 15 px, 68 characters, over the room) */
html.room-live body.portfolio-case #main :is(p,li):not([class]){font-size:max(17px,1em);line-height:1.6;max-width:66ch}
/* The «10» zoom (home and About; review 18 Oct, P0 1.1): the giant digits were cut by the sticky stage's own box
   (overflow: clip, 58 px in from the sides and 100 px down), straight hard edges that read as a frame and as a
   neighbouring digit bleeding in. The digits now run to the edges of the screen; the section alone clips them top and
   bottom, so they never spill into the sections around it. */
html:is(.space-on,.airy,.room-live) .experience-scroll{clip-path:inset(0 -100vw)}
html:is(.space-on,.airy,.room-live) .experience-scroll .experience-stage{overflow:visible!important}
/* the zoomed digits reach past the page sideways: the document clips them (clip keeps sticky working, unlike hidden) */
html:is(.space-on,.airy,.room-live){overflow-x:clip}
/* One ink per section (review 18 Oct, P1 1.3b): the ledger figures on About (250+, 100,000+, 102m, 19m+, 10,000+, 40th)
   were the accent blue #52555b over the water, a second ink that vibrated against the cyan. They take the section's
   own ink; their scale carries the hierarchy. */
html:is(.space-on,.airy,.room-live) .cs-ledger :is(dt,dt *,[data-count]){color:inherit!important;-webkit-text-fill-color:currentColor!important}
/* The type band under water (home; review 18 Oct, 1.4c): «Interfaces Systems …» ran in navy with a navy spotlight
   while the section it opens — «From the system to the smallest detail.» — is white in both themes: two inks in one
   section. Under water the band takes the section's light ink; its words still run off the edges (a deliberate crop),
   the spotlight stays a step of the same ink. */
html:is(.space-on,.airy) body .type-band-word,html:is(.space-on,.airy) body .type-band-word.is-outline{color:rgba(244,247,253,.3)!important}
html:is(.space-on,.airy) body .type-band-ink .type-band-word{color:#f4f7fd!important}
/* Phones (review 18 Oct, 6.2): the three round controls (theme, OS, sound) sit fixed bottom-right, 52 px tall, and
   the About opener's CTA ran under them. On narrow screens they keep clear of the home indicator (safe area), and the
   openers whose copy sits at the bottom of the first screen lift it above the controls. */
@media (max-width:700px){
 html body :is(.theme-toggle,.os-toggle,.sound-toggle):not(#_u){bottom:calc(16px + env(safe-area-inset-bottom,0px))!important}
 html:is(.space-on,.airy,.room-live,.has-frame) body[data-page=about] .about-head-hero .about-opening-copy{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))!important}   /* .has-frame: the still room (no room-live) kept the CTA under the frame's bottom tab (devices, 22 Oct) */
 html:is(.space-on,.airy) body #hero .hero-copy{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
}
/* 18 Oct (seen at 1100×620): the process copy ran under the fixed controls (theme, sound, level; 52 px tall, 24 px off
   the bottom), so the last line of each step read through the buttons. The scenes stand clear of that band. */
@media (min-width:701px){html:is(.space-on,.airy) .process-scroll .process-scenes:not(#_u){bottom:96px}}

/* 18 Oct (QA matrix): the full-bleed horizontal tracks (the years, the type band, About's project track, 3490 px)
   widened the document. The root's `clip` acts as `hidden` on the viewport, so a focused link or a script could still
   shift the page sideways (measured: 288 px on About). Each section clips its own track; `clip` keeps sticky intact.
   About's agency section too: in the live world its form's canvas reaches 20 % past the form (js/3d/industry-forms.js),
   and the phone's page grew to 469 px at 390, the frame's right controls and bottom tab past the screen (devices, 22 Oct) */
html:is(.space-on,.airy,.room-live) main > :is(#years,.type-band,#about,.agency-publications,section:has(> .experience-scroll)):not(#_u){overflow-x:clip}

/* The industries (Fintech, Web3, Platforms) stand in the water as three bare rows (18 Oct, the owner allowed the
   review's «no glass boxes»): they were a sticky stack of deep-glass cards (26 % navy, backdrop blur, radius 30) that
   slid over each other. Now each is the copy in the left columns and its glass form on the right, divided by air;
   no plate, no stack, no scale. Phones: copy above, form below. */
html:is(.space-on,.airy) .design-principles .industry-panel:nth-child(n):not(#_u){position:relative!important;top:auto!important;transform:none!important;filter:none!important;
 background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;
 min-height:min(78svh,760px)!important;margin:0 0 clamp(40px,8svh,120px)!important;padding:0!important;overflow:visible!important}
html:is(.space-on,.airy) .design-principles .industry-panel:nth-child(n):not(#_u)::before,html:is(.space-on,.airy) .design-principles .industry-panel:nth-child(n):not(#_u)::after{display:none!important}
html:is(.space-on,.airy) #principles .industry-stack{padding-bottom:0!important}
@media (max-width:700px){
 html:is(.space-on,.airy) .design-principles .industry-panel:nth-child(n):not(#_u){min-height:0!important;margin-bottom:clamp(56px,10svh,96px)!important;gap:8px!important;padding-bottom:28px!important}
}
/* About in the live world (18 Oct): the year cards and the career rail stood on plates — a pale card with a hairline
   under each year's project, 75 % white glass (radius 26, backdrop blur) under each career panel. In the water they
   stand bare: the project's screen, its name, the career copy in the section's one ink, divided by air. */
html.room-world-live body .year-card{background:none!important;outline:0!important}
html.room-world-live body .year-card::before{display:none}
html.room-world-live body .year-card .year-card-brand{display:none}
html.room-world-live body .career-detail .cr-panel:not(#_u){background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important;border:0!important}
/* Home and About stop repeating each other (18 Oct, the review's Phase 5, the owner allowed): the home page keeps the
   «10 years» zoom and the short bio, then one link to the full story; the recognition tabs (work experience, awards,
   events) live on About only, and About no longer repeats the «10» zoom: it opens on the statement and goes straight
   to the companies. */
#about .about-intro .about-more{grid-column:2;margin:clamp(28px,4svh,48px) 0 0 -3vw;padding:0;font-size:16px;letter-spacing:0;line-height:1.3}
#about .about-intro .about-more .text-button{font-size:16px;letter-spacing:0}
@media (max-width:700px){#about .about-intro .about-more{grid-column:auto;margin-left:0}}/* The Pass feature (home and About) stood on a deep-glass plate (30 % navy, blur, radius 28): bare in the world, the
   product's screen and its copy on the water like the rest. */
html:is(.space-on,.airy,.room-world-live) body .pass-section.pass-feature:not(#_u){background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:0!important;box-shadow:none!important}
/* Award pipeline §8 B02/M04/M05 + §5 (18 Oct): after the six projects the home page showed an empty screen of
   clouds with filter chips, then «And the rest.» and a 34-card grid. In the world the six are the selection; the
   rest is one link to /work. The grid stays in the DOM (the ring reads its titles, the camera's turn and the airy
   level anchor on #cardContainer) but takes no room and is never seen. */
html:is(.space-on,.airy) #projects .work-tools{display:none!important}
html:is(.space-on,.airy) #projects #cardContainer{height:0!important;min-height:0!important;overflow:hidden!important;visibility:hidden!important;margin:0!important;padding:0!important}
html:is(.space-on,.airy) #projects .work-more{display:flex;justify-content:flex-start;padding:clamp(24px,5svh,64px) var(--gutter,58px) clamp(80px,14svh,160px)}
@media (max-width:700px){html:is(.space-on,.airy) #projects .work-more{padding:24px 22px 96px}}/* B01/M03: the round «open» arrow on the ring sat on the project title. The title is the link; the arrow is not drawn
   (kept for the keyboard path: it still receives focus and shows itself only when focused) */
html:is(.space-on,.airy) .wo-open:not(:focus-visible){opacity:0!important;pointer-events:none!important}
html:is(.space-on,.airy) .wo-title-link{color:inherit;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;transition:background-size .7s cubic-bezier(.16,1,.3,1)}
@media (hover:hover){html:is(.space-on,.airy) .wo-title-link:hover{background-size:100% 2px}}
html:is(.space-on,.airy) .wo-title-link:focus-visible{outline:2px solid currentColor;outline-offset:6px}
/* Phones (award pipeline M06/M07, 18 Oct): the three round controls (OS, sound, theme) sat over the copy on every
   screen. On narrow screens they live with the menu: hidden while it is closed, a row under the open menu panel
   (the panel's own links end at ~400 px). The footer's first screen no longer leaves a screen of empty water. */
@media (max-width:700px){
 html body .site-header:not(:has(.glass-nav.menu-open)) :is(.theme-toggle,.os-toggle,.sound-toggle):not(#_u){opacity:0!important;visibility:hidden!important;pointer-events:none!important}
 html body .site-header:has(.glass-nav.menu-open) :is(.theme-toggle,.os-toggle,.sound-toggle):not(#_u){top:auto!important;bottom:auto!important;transition:opacity .25s cubic-bezier(.16,1,.3,1)}
 html body .site-header:has(.glass-nav.menu-open) .os-toggle:not(#_u){position:fixed!important;top:428px!important;left:16px!important;right:auto!important}
 html body .site-header:has(.glass-nav.menu-open) .sound-toggle:not(#_u){position:fixed!important;top:428px!important;left:76px!important;right:auto!important}
 html body .site-header:has(.glass-nav.menu-open) .theme-toggle:not(#_u){position:fixed!important;top:428px!important;left:136px!important;right:auto!important}
 html:is(.space-on,.airy,.room-live) body .footer-top{min-height:0!important;padding-bottom:clamp(48px,10svh,96px)!important}
}
/* SOTD review, 18 Oct (handoff/award-pipeline-20261018/SOTD-REVIEW-20261018.md) */
/* T03: the header arrives with the reveal, not 650 ms after it */
body[data-intro=revealing] .site-header:not(#_u){animation-delay:120ms!important}
/* B03/M04: the pill tucks away while reading down (js/site-motion.js initHeaderTuck); only the pill moves, the fixed
   controls in the same header stay */
html body .site-header .glass-nav:not(#_u){transition:--nva .7s cubic-bezier(.22,1,.36,1),--nvb .7s cubic-bezier(.22,1,.36,1),--nvc .7s cubic-bezier(.22,1,.36,1),--nink .7s cubic-bezier(.22,1,.36,1),color .7s cubic-bezier(.22,1,.36,1),padding .7s cubic-bezier(.16,1,.3,1),border-radius .7s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1),opacity .35s cubic-bezier(.16,1,.3,1)!important}
html body .site-header.is-tucked .glass-nav:not(#_u){transform:translateY(calc(-100% - 40px));opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){html body .site-header .glass-nav:not(#_u){transition:opacity .2s linear!important}html body .site-header.is-tucked .glass-nav:not(#_u){transform:none}}
/* M04: on phones copy no longer shows sharp above the floating pill: a soft blur band at the top edge */
@media (max-width:640px){
 html body .site-header::before{content:'';position:fixed;left:0;right:0;top:0;height:calc(env(safe-area-inset-top,0px) + 80px);pointer-events:none;z-index:-1;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);-webkit-mask-image:linear-gradient(#000 45%,transparent);mask-image:linear-gradient(#000 45%,transparent);transition:opacity .35s}
 html body .site-header.is-tucked::before{opacity:0}
}
/* B06: "Back to top" clears the fixed controls (OS, sound, theme) at the bottom right */
@media (min-width:641px){html body #footer .footer-links:not(#_u){padding-right:clamp(200px,16vw,240px)}}
/* sentence case on the page-change card and the loader (the names were forced to lowercase) */
html body :is(.page-wave__note,.page-wave__name,.page-shutter .shutter-name,.page-shutter .shutter-note,.portfolio-loader .loader-status):not(#_u){text-transform:none!important}
/* M02 (SOTD review): on phones the hero copy sits over the planet's bright day clouds; a low night falloff from the
   bottom keeps the headline and the note readable over any part of the globe */
@media (max-width:640px){
 html:is(.space-on,.airy) .hero-frame::after{content:'';position:absolute;left:0;right:0;bottom:0;height:56%;pointer-events:none;z-index:1;background:linear-gradient(to top,rgba(1,4,10,.66) 0%,rgba(1,4,10,.38) 45%,rgba(1,4,10,0) 100%)}
 html:is(.space-on,.airy) .hero-frame :is(.hero-copy,.hero-bottom){z-index:2}
}
/* The white menu (18 Oct). The owner: «меню уйти от стекла а в белое» (Vyshneva Dolyna's device, our own styling).
 * One white pill in both themes with near-black ink and the contact pill in ink. No glass film, sheen, optics, blur,
 * rim or shadow. Hover keeps the decoded labels and gets a quiet grey drop instead of the iridescent lens. */
html body .site-header .glass-nav:not(#_u){--nva:#fff;--nvb:#fff;--nvc:#fff;--nink:#000000;--nav-ink:#000000;--nav-film:#fff;color:#000000!important;background:#fff!important;border-color:transparent!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html body .site-header .glass-nav:not(#_u)::before{background:#fff!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important}
html body .site-header .glass-nav:not(#_u)::after{content:none!important}
html body .site-header .glass-nav:not(#_u) :is(.nav-optics,.nav-liquid-backdrop,.nav-rim){display:none!important}
html body .site-header .glass-nav:not(#_u) .nav-drop{background:#eceff5!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;mix-blend-mode:normal!important}
html body .site-header .glass-nav:not(#_u) .nav-drop::before,html body .site-header .glass-nav:not(#_u) .nav-drop::after{content:none!important}
html body .site-header .glass-nav:not(#_u) :is(.nav-links a,.menu-toggle,.brand){color:#000000!important}
html body .site-header .glass-nav:not(#_u) .menu-toggle span{background:#000000!important}
html body .site-header .glass-nav:not(#_u) .brand img{filter:none!important}
html body .site-header .glass-nav:not(#_u) .nav-contact{background:#000000!important;color:#fff!important;border-color:transparent!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html body .site-header .glass-nav:not(#_u) .nav-contact::before,html body .site-header .glass-nav:not(#_u) .nav-contact::after{content:none!important}
html body .site-header .glass-nav:not(#_u) .nav-contact :is(span,svg){color:#fff!important}
/* the three corner controls (theme, sound, OS mode) join the white menu: white circles, ink icons, no glass */
html body .site-header :is(.theme-toggle,.os-toggle,.sound-toggle):not(#_u){background:#fff!important;color:#000000!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-color:transparent!important;box-shadow:none!important}
html body .site-header :is(.theme-toggle,.os-toggle,.sound-toggle):not(#_u)::before,html body .site-header :is(.theme-toggle,.os-toggle,.sound-toggle):not(#_u)::after{content:none!important}
html body .site-header :is(.theme-toggle,.os-toggle,.sound-toggle):not(#_u) svg{color:#000000!important}
html body .site-header :is(.theme-toggle,.os-toggle,.sound-toggle):not(#_u):hover{background:#eceff5!important}
/* Monochrome (owner, 19 Oct: «наш темносиний сделаем черным», «в темной теме… плашка инвертирует… и шрифт»): by night the
 * menu and the corner controls invert, black with white ink and a white contact pill */
html[data-theme=dark] body .site-header .glass-nav:not(#_u){--nink:#fff;--nav-ink:#fff;color:#fff!important;background:#000000!important}
html[data-theme=dark] body .site-header .glass-nav:not(#_u)::before{background:#000000!important}
html[data-theme=dark] body .site-header .glass-nav:not(#_u) :is(.nav-links a,.menu-toggle,.brand){color:#fff!important}
html[data-theme=dark] body .site-header .glass-nav:not(#_u) .menu-toggle span{background:#fff!important}
html[data-theme=dark] body .site-header .glass-nav:not(#_u) .brand img{filter:brightness(0) invert(1)!important}
html[data-theme=dark] body .site-header .glass-nav:not(#_u) .nav-contact{background:#fff!important;color:#000000!important}
html[data-theme=dark] body .site-header .glass-nav:not(#_u) .nav-contact :is(span,svg){color:#000000!important}
html[data-theme=dark] body .site-header .glass-nav:not(#_u) .nav-drop{background:#1e2127!important}
html[data-theme=dark] body .site-header :is(.theme-toggle,.os-toggle,.sound-toggle):not(#_u){background:#000000!important;color:#fff!important}
html[data-theme=dark] body .site-header :is(.theme-toggle,.os-toggle,.sound-toggle):not(#_u) svg{color:#fff!important}
html[data-theme=dark] body .site-header :is(.theme-toggle,.os-toggle,.sound-toggle):not(#_u):hover{background:#1e2127!important}
/* The 1-bit world (js/one-bit.js, js/3d/glass-post.js). The world's pictures outside WebGL (the stills before the live
 * world, the airy page, the sections' own scenes) take the same Bayer dither through SVG filters: paper by day, ink by
 * night. The work keeps its colour. The grey veil behind the copy goes: the world itself fades to paper or ink there. */
html.one-bit .space-dim{display:none!important}
html.one-bit:not([data-theme=dark]) :is(.room-world .room-still img,html.airy .airy-still img,.design-principles canvas,.scene-art canvas,.scene-fallback img,.hero-poster,.head-poster,.head-fallback img,.loader-sculpture img){filter:url(#one-bit-day)!important}
html.one-bit[data-theme=dark] :is(.room-world .room-still img,html.airy .airy-still img,.design-principles canvas,.scene-art canvas,.scene-fallback img,.hero-poster,.head-poster,.head-fallback img,.loader-sculpture img){filter:url(#one-bit-night)!important}
/* by day the orbit prints in negative, so its copy is ink; so is the copy over the sea, which now fades to paper */
html.one-bit:not([data-theme=dark]) .hero-frame,html.one-bit:not([data-theme=dark])[data-theme] .hero-frame{--hero-ink:#000000;--hero-muted:#585b61}
html.one-bit:not([data-theme=dark]):is(.space-on,.airy) :is(#design-bottom,#principles,#services,#about){--ink:#000000;--muted:#585b61;--hero-ink:#000000;color:#000000}
html.one-bit:not([data-theme=dark]):is(.space-on,.airy) :is(#design-bottom,#principles,#services,#about,#process,[id^=process-panel],[id^=process-heading]) :is(h1,h2,h3,h4,p,span,li,figcaption,small):not(.text-button *,.svc-cta *,.text-button,.svc-cta,.sr-only){color:#000000!important;-webkit-text-fill-color:#000000}
html.one-bit:not([data-theme=dark]):is(.space-on,.airy) :is(.years-tick,.process-stage-top,.industry-copy,.industry-copy *,.type-band-word,#pass-title,#pass-title *,.pass-copy,.si-name):not(.text-button,.text-button *,.svc-cta,.svc-cta *,.years-more,.years-more *){color:#000000!important;-webkit-text-fill-color:#000000}
/* the buttons inside that copy keep their own label: -webkit-text-fill-color is inherited, so the Pass CTA printed ink
 * on its ink pill (the compositions report, W11: 1.09:1) */
html.one-bit:is(.space-on,.airy) :is(.text-button,.text-button *,.svc-cta,.svc-cta *,.years-more,.years-more *){-webkit-text-fill-color:currentColor}
html.one-bit:not([data-theme=dark]):is(.space-on,.airy) .hero-frame::after{background:linear-gradient(to top,rgba(255,255,255,.72) 0%,rgba(255,255,255,0) 100%)!important}
/* the caustic on the principles and services titles was a light blue: in the 1-bit world it is a silver shimmer */
html.one-bit:is(.space-on,.airy) :is(#principles-title,#services-title) .mt-char,html.one-bit:is(.space-on,.airy) :is(#principles-title,#services-title):not(:has(.mt-char)){background-image:linear-gradient(104deg,#f4f7fd 0%,#d2d5db 18%,#ffffff 30%,#b4b7bd 44%,#f6f9ff 56%,#dfe2e8 70%,#ffffff 84%,#eef1f7 100%)}
/* The frame (js/site-frame.js, 19 Oct). The owner: «на светлой — чёрная рамка, кнопки звука и темы вынесены отдельно,
 * интерфейс белый; меняешь тему — рамка белая, интерфейс чёрный». The world sits in a window cut into the frame; its
 * corners step in 4 px stairs (a 1-bit window). The brand and the controls sit in the frame's tabs, in the frame's
 * opposite colour. Smooth corners: the style is modern, not retro (owner, 19 Oct). */
/* Concentric corners (owner, 20 Oct: «аккуратные скругления внутренней и внешней, чтобы обтекало плавно»): a tab's own
   corner is the radius of what it holds plus the gap round it (a 40 px control in a 6 px rim: 20 + 6 = 26), so the rim
   keeps one width round the bend; the window's corner into the tab has the same radius, so the edge runs into the tab as
   one S with no straight piece (a tab is 2 × 26 tall). Before: 20 for both, and the rim round «Let's talk» swelled from 6
   to 9 px at the diagonal. --frame-rb: the phone's bottom tab, round a 44 px button in a 6 px rim (22 + 6). */
:root{--frame:12px;--frame-r:26px;--frame-rb:26px;--frame-step:0px;--frame-pad:6px;--frame-ctl:40px;--frame-gap:4px;--frame-ink:#000000;--frame-on:#ffffff}
html[data-theme=dark]{--frame-ink:#ffffff;--frame-on:#000000}
@media (max-width:700px){:root{--frame:8px;--frame-r:22px;--frame-rb:28px;--frame-pad:4px;--frame-ctl:36px}}
.site-frame{position:fixed;inset:0;z-index:45;pointer-events:none}
.site-frame svg{display:block;position:absolute;left:0;right:0;width:100%!important;max-width:none!important;max-height:none!important}
.site-frame svg.sf-top{top:0}.site-frame svg.sf-bottom{bottom:0}
/* the window's straight sides between the two bands (js/site-frame.js, nine-slice): they follow the window's height */
.site-frame>i{position:absolute;top:var(--sf-t,0);bottom:var(--sf-b,0);width:var(--frame);background:var(--frame-ink)}.site-frame>i.sf-left{left:0}.site-frame>i.sf-right{right:0}
/* a phone's toolbar (21 Oct; the owner's screenshots, Chrome on Android: «кнопка прыгает внизу отдельно от рамки»): when the
   address bar hides, Chrome moves the fixed boxes anchored to the bottom (the nav's pill) to the new bottom but keeps a
   box anchored top and bottom (the frame, inset 0) at the old height, so the pill stood below the frame or the frame's tab
   under the screen's edge. Each band is now fixed on its own edge, and the sides run the large viewport's height under the
   bottom band, so no gap opens between them */
.site-frame svg.sf-top{position:fixed}.site-frame svg.sf-bottom{position:fixed}
.site-frame>i{position:fixed;bottom:auto;height:calc(100lvh - var(--sf-t,0px))}
.site-frame path{fill:var(--frame-ink)}
/* -72: the band between the top tabs is the header's own ground. Copy that scrolled up ran between the tabs to the
   window's edge and stood in the band for a moment against the brand's tab: «Selected work.» as its pin let go, the
   services' titles, About's lead, the footer's «feel clear.» (the visual jury, round 1: «pinned titles sit in the frame
   band and touch the logo notch»). The page now ends under the tabs' line, as under a toolbar of its own colour: under
   the frame's drawing (first in its layer), over the page and the world. Not while the film's letterbox or a page's
   arrival fills the window with the frame's ink (js/film-clear.js .is-band, js/block-wipe.js): there the band is ink.
   Phones too (the jury at 390: the page «rises to y = 8 inside the single ear between the logo and the icon notch, so a
   strip about 44 px tall shows there on every scrolled still»; their tabs are 52 px). At the top of a page the window still runs to its edge (the
   home's planet fills the phone's ear): the band comes in over the first 48 px of scroll, on the root's scroll
   timeline; a browser without scroll timelines keeps it from the start */
html.has-frame .site-frame::before{content:'';position:fixed;left:0;right:0;top:0;height:calc(var(--frame) + var(--frame-ctl) + 2*var(--frame-pad));background:var(--frame-on);pointer-events:none}
html.has-frame:has(.film-clear.is-band,.block-wipe-arrival) .site-frame::before{display:none}
@supports (animation-timeline:scroll()){html.has-frame .site-frame::before{animation:sf-band linear both;animation-timeline:scroll(root);animation-range:0 48px}}
@keyframes sf-band{from{opacity:0}to{opacity:1}}
html.has-frame body .site-header .glass-nav:not(#_u) .brand{display:none!important}
html.has-frame .frame-brand{position:fixed;z-index:51;pointer-events:auto;top:calc(var(--frame) + var(--frame-pad));left:calc(var(--frame) + var(--frame-pad));width:var(--frame-ctl);height:var(--frame-ctl);display:grid;place-items:center;border-radius:999px;color:var(--frame-on)}
html.has-frame .frame-brand img{width:26px;height:auto;display:block;filter:invert(1)}
html.has-frame[data-theme=dark] .frame-brand img{filter:none}
html.has-frame .frame-brand:focus-visible{outline:2px solid var(--frame-on);outline-offset:2px}
html.has-frame body .site-header :is(.theme-toggle,.sound-toggle,.os-toggle):not(#_u):not(#_v){position:fixed!important;z-index:51!important;top:calc(var(--frame) + var(--frame-pad))!important;bottom:auto!important;left:auto!important;width:var(--frame-ctl)!important;height:var(--frame-ctl)!important;margin:0!important;transform:none!important;
 background:transparent!important;color:var(--frame-on)!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important}
html.has-frame body .site-header .theme-toggle:not(#_u):not(#_v){right:calc(var(--frame) + var(--frame-pad))!important}
html.has-frame body .site-header .sound-toggle:not(#_u):not(#_v){right:calc(var(--frame) + var(--frame-pad) + var(--frame-ctl) + var(--frame-gap))!important}
html.has-frame body .site-header .os-toggle:not(#_u):not(#_v){right:calc(var(--frame) + var(--frame-pad) + 2*(var(--frame-ctl) + var(--frame-gap)))!important}
html.has-frame body .site-header :is(.theme-toggle,.sound-toggle,.os-toggle):not(#_u):not(#_v) svg{color:var(--frame-on)!important}
html.has-frame body .site-header :is(.theme-toggle,.sound-toggle,.os-toggle):not(#_u):not(#_v):hover{background:color-mix(in srgb,var(--frame-on) 16%,transparent)!important}
html.has-frame body .site-header :is(.theme-toggle,.sound-toggle,.os-toggle):not(#_u):not(#_v) .control-rim{display:none!important}
/* the OS control answers the hand (21 Oct; os-mode.md A2): the frame holds the button still, so its glyph takes the press
   (.88 in 120 ms on the house curve) and, while the modules load on a cold click, breathes */
html.has-frame body .site-header .os-toggle:not(#_u):not(#_v) svg{transition:transform .12s cubic-bezier(.16,1,.3,1)}
html.has-frame body .site-header .os-toggle:not(#_u):not(#_v):active svg{transform:scale(.88)}
html.has-frame body .site-header .os-toggle:not(#_u):not(#_v)[aria-busy=true] svg{animation:os-busy .9s cubic-bezier(.65,0,.35,1) infinite alternate}
@keyframes os-busy{to{opacity:.4;transform:scale(.92)}}
@media (prefers-reduced-motion:reduce){html.has-frame body .site-header .os-toggle:not(#_u):not(#_v) svg{transition:none;animation:none!important}}
/* phones: the OS control stands in the frame's tab with sound, colour and theme (21 Oct; research-20261021b/os-mode.md A1:
   hidden here, the phone mode never opened on a phone) */
/* the paper sheet on /work fills the window from edge to edge of the frame */
html.has-frame body[data-page=work] .work-sheet{margin-left:calc(var(--frame) - var(--gutter,0px));margin-right:calc(var(--frame) - var(--gutter,0px));border-radius:var(--frame-r) var(--frame-r) 0 0}
/* the 1-bit world carries no coloured light: the old cursor glow goes (the cursor scatter replaces it) */
html.one-bit .cursor-light{display:none!important}
/* the principles and services titles keep their shimmer, in ink by day (silver on paper was unreadable) */
html.one-bit:not([data-theme=dark]):is(.space-on,.airy) :is(#principles-title,#services-title) .mt-char,html.one-bit:not([data-theme=dark]):is(.space-on,.airy) :is(#principles-title,#services-title):not(:has(.mt-char)){background-image:linear-gradient(104deg,#000000 0%,#2a2d33 22%,#000000 40%,#46494f 56%,#000000 72%,#22252b 88%,#000000 100%)}
/* copy over the world reads in full ink by day, never the muted grey */
html.one-bit:not([data-theme=dark]) :is(.hero-frame .hero-note,.about-opening-copy p){color:#000000!important}
html.one-bit[data-theme=dark] :is(.hero-frame .hero-note,.about-opening-copy p){color:#ffffff!important}
/* By day the 1-bit world is paper, so every line that the old blue world set in white over it reads in ink
   (css/space-room.css 90/96/104/110 and css/space.css 54/134/150/177/184 set white for the old dark-blue world) */
html.one-bit:not([data-theme=dark]).room-world-live body[data-page=approach] .page-opening :is(h1,h2),
html.one-bit:not([data-theme=dark]).room-world-live body[data-page=approach] :is(.design-cycle,.practice-grid,.cycle-panel,.cycle-detail,.practice-detail) :is(h2,h3,h4,p,li,.cycle-tab),
html.one-bit:not([data-theme=dark]).room-live body .hero-frame :is(h1,h2,p,.hero-note),
html.one-bit:not([data-theme=dark]):is(.space-on,.airy) #design-bottom .process-sticky,
html.one-bit:not([data-theme=dark]):is(.space-on,.airy) #design-bottom .process-sticky :is(h3,p),
html.one-bit:not([data-theme=dark]):is(.space-on,.airy) #about .bio-tabs button{color:#000000!important}
html.one-bit:not([data-theme=dark]).room-world-live body[data-page=approach] .practice-grid article :is(h3,h3 *){color:#000000!important;-webkit-text-fill-color:#000000!important}
html.one-bit:not([data-theme=dark]):is(.space-on,.airy) #about .about-intro>p[data-scroll-fill]{--ink:#000000;--muted:rgba(7,10,16,.42)}
@supports (-webkit-touch-callout:none){html.one-bit:not([data-theme=dark]):is(.space-on,.airy) :is(#principles-title,#services-title) .mt-char,html.one-bit:not([data-theme=dark]):is(.space-on,.airy) :is(#principles-title,#services-title){color:#000000}}
/* the pages' own WebGL scenes with their own renderers (the design cycle, the principles, the service forms, the kit
   scenes) join the 1-bit world through the same Bayer filters (js/one-bit.js) */
html.one-bit:not([data-theme=dark]) canvas.kit-canvas{filter:url(#one-bit-day-object)!important}
/* the objects keep only their fine dark by day and their fine light by night, like the industry forms (20 Oct: the
   Approach tiles printed as a grey stain) */
html.one-bit:not([data-theme=dark]) :is(canvas.cycle-canvas,canvas.principles-canvas,canvas.service-morph-canvas){filter:url(#one-bit-alpha-fine-ink)!important}
html.one-bit[data-theme=dark] canvas.kit-canvas{filter:url(#one-bit-night-object)!important}
html.one-bit[data-theme=dark] :is(canvas.cycle-canvas,canvas.principles-canvas,canvas.service-morph-canvas){filter:url(#one-bit-alpha-fine)!important}
/* Explore's corridor of covers (js/3d/cover-tunnel.js, where the room world cannot run) dissolves its own edge in Bayer
   order: the orb's soft mask over the printed canvas left a smooth grey ramp on a corner cover (22 Oct) */
html.one-bit .explore-orb.explore-tunnel.has-tunnel{-webkit-mask-image:none!important;mask-image:none!important}
/* the rest of the copy the old blue world set in white over itself: by day it reads in ink, on every page with a world
   (22 Oct: and in its still rooms too, html[data-room]; Explore's lede read grey on the stills' dots at 390) */
html.one-bit:not([data-theme=dark])[data-room] body[data-page=approach] .page-opening p{color:#000000!important}
html.one-bit:not([data-theme=dark])[data-room] body :is(.page-opening,.gallery-opening-copy,.cv-opening,.case-cover-copy,.section-heading) :is(h1,h2,p){color:#000000!important}
html.one-bit[data-theme=dark][data-room] body :is(.page-opening,.gallery-opening-copy,.cv-opening,.case-cover-copy,.section-heading) :is(h1,h2,p){color:#ffffff!important}
html.one-bit:not([data-theme=dark])[data-room] body[data-page=approach] :is(.design-cycle,.practice-grid) :is(p,li){color:#000000!important}
/* the About lead sits beside the dithered bust: a paper (or ink) ground under the copy, faded at its edges, so the dots
   never run through the letters */
html.one-bit body[data-page=about] .about-opening-copy{isolation:isolate}   /* it is already positioned; never re-position it */
html.one-bit body[data-page=about] .about-opening-copy:not(#_u)::before{content:''!important;position:absolute!important;z-index:-1;display:block!important;inset:-6% -14% -10% -6%;background:radial-gradient(70% 70% at 40% 55%,var(--frame-on,#fff) 55%,transparent 100%);pointer-events:none}
html.one-bit:not([data-theme=dark]) body[data-page=about] .about-opening-copy:not(#_u)::before{background:radial-gradient(70% 70% at 40% 55%,#fff 55%,rgba(255,255,255,0) 100%)}
html.one-bit[data-theme=dark] body[data-page=about] .about-opening-copy:not(#_u)::before{background:radial-gradient(70% 70% at 40% 55%,#000000 55%,rgba(7,10,16,0) 100%)}
/* phones in the frame (19 Oct): the menu pill sits between the frame's two tabs, compact and centred; the old blur band
   at the top goes (the frame's top edge does that job now) */
@media (max-width:700px){
 /* centred without a transform: a transformed header would become the containing block of the fixed brand and controls */
 html.has-frame body .site-header:not(#_u):not(#_v){left:0!important;right:0!important;margin-inline:auto!important;width:fit-content!important;max-width:calc(100vw - 2*var(--frame) - 2*92px)!important;transform:none!important;top:calc(var(--frame) + 4px)!important}
 /* the buttons stand in a 6 px rim of the tab (the tab's 4 px pad and the pill's 2), as the desktop's do, and «Let's talk»
    is a full pill like them: the tab's corner (--frame-rb, 28) is the button's radius (22) plus the rim (20 Oct) */
 html.has-frame body .site-header:not(:has(.glass-nav.menu-open)) .glass-nav:not(#_u):not(#_v){width:auto!important;height:auto!important;min-height:0!important;padding:2px!important;gap:0!important}
 html.has-frame body .site-header .glass-nav:not(#_u):not(#_v) .nav-contact{height:44px!important;min-height:0!important;padding:0 16px!important;font-size:13px!important;border-radius:999px!important}
 /* while the footer's «Let's talk» is on screen the tab's one steps aside and the tab hugs the menu alone (the class:
    js/site-frame.js; the two stacked at the bottom of every page, 22 Oct, review R09) */
 html.has-frame body .site-header .glass-nav:not(#_u):not(#_v) .nav-contact{max-width:180px;overflow:clip;transition:max-width .5s cubic-bezier(.16,1,.3,1),padding .5s cubic-bezier(.16,1,.3,1),opacity .25s linear,visibility 0s}
 html.has-frame.footer-talk body .site-header:not(:has(.glass-nav.menu-open)) .glass-nav:not(#_u):not(#_v) .nav-contact{max-width:0;padding:0!important;border-width:0!important;opacity:0;visibility:hidden;
  transition:max-width .5s cubic-bezier(.16,1,.3,1),padding .5s cubic-bezier(.16,1,.3,1),opacity .2s linear,visibility 0s linear .5s}
 /* the closed menu's hidden links gave the pill its width (186 px at 390): they step aside too, so the tab closes round
    the menu button instead of standing empty */
 html.has-frame body .site-header:not(:has(.glass-nav.menu-open)) .glass-nav:not(#_u):not(#_v) .nav-links{max-width:240px;transition:max-width .5s cubic-bezier(.16,1,.3,1)}
 html.has-frame.footer-talk body .site-header:not(:has(.glass-nav.menu-open)) .glass-nav:not(#_u):not(#_v) .nav-links{max-width:0;overflow:hidden}
 html.has-frame body .site-header::before{display:none!important}
 /* the hero copy stands on its own ground: the planet's dots stop above it */
 html.one-bit:is(.space-on,.airy) .hero-frame::after{display:none!important}
 /* the copy gets a feathered ground of its own; the planet stays round it */
 html.one-bit:is(.space-on,.airy) .hero-frame .hero-copy :is(h1,.hero-note){position:relative;isolation:isolate}
 html.one-bit:is(.space-on,.airy) .hero-frame .hero-copy :is(h1,.hero-note)::before{content:''!important;position:absolute!important;display:block!important;z-index:-1;inset:-10px -14px;border-radius:20px;pointer-events:none;background:var(--one-bit-ground,#fff);filter:blur(12px)}
}
@media (max-width:700px) and (prefers-reduced-motion:reduce){html.has-frame body .site-header .glass-nav:not(#_u):not(#_v) :is(.nav-contact,.nav-links){transition:none!important}}
/* small copy over the dithered sea (the process stages): a soft ground of the page's colour behind each paragraph, so
   the dots thin around the words instead of running through them; the scene stays everywhere else */
html.one-bit #design-bottom .process-panel p{position:relative;isolation:isolate}
html.one-bit #design-bottom .process-panel p::before{content:''!important;position:absolute!important;display:block!important;z-index:-1;inset:-16px -22px;border-radius:24px;pointer-events:none;
 background:var(--one-bit-ground,#fff);filter:blur(14px)}   /* a feathered block: solid under every word, soft at its edge */
html.one-bit:not([data-theme=dark]){--one-bit-ground:#fff}
html.one-bit[data-theme=dark]{--one-bit-ground:#000000}
html.one-bit #about .about-intro>p{position:relative;isolation:isolate}
html.one-bit #about .about-intro>p::before{content:''!important;position:absolute!important;display:block!important;z-index:-1;inset:-18px -26px;border-radius:28px;pointer-events:none;background:var(--one-bit-ground,#fff);filter:blur(18px);opacity:.92}
/* Reading grounds (js/reading-ground.js): small text straight on the 1-bit world sits on a feathered block of the
   page's own colour; the dots thin round the words, the world stays everywhere else */
html.one-bit [data-rg]{isolation:isolate}
html.one-bit [data-rg=after]::after,html.one-bit [data-rg]:not([data-rg=after])::before{content:''!important;position:absolute!important;display:block!important;z-index:-1;inset:-8px -14px;border-radius:16px;pointer-events:none;background:var(--one-bit-ground,#fff);filter:blur(10px)}
/* where the live world runs, small copy reads on lanes cleared in the dots themselves (js/3d/space-lanes.js, 19 Oct):
   the dots clear along the lines of type with a two-cell edge, so every feathered CSS ground above steps aside */
html.one-bit.lanes :is([data-rg]:not([data-rg=after]),#design-bottom .process-panel p,#about .about-intro>p,.hero-frame .hero-copy .hero-note)::before,html.one-bit.lanes [data-rg=after]::after{display:none!important}
/* the 404 hero: its scene prints in negative in both themes (js/3d/glass-post.js), so its copy follows the page's ink */
html.one-bit:not([data-theme=dark]).room-live body .hero-frame :is(h1,h2,p,.hero-note,.hero-person,.hero-person *){color:#000000!important}
html.one-bit[data-theme=dark].room-live body .hero-frame :is(h1,h2,p,.hero-note,.hero-person,.hero-person *){color:#ffffff!important}
/* -73 (QA-73 row 13): where the 404's room does not run live (no WebGL, ?space=off) it showed the legacy folds poster under
   its title, printed against the theme (dark under the black title by day, white under the white title by night). Its
   world is the glyph print, which runs only live; until then, and without it, the title, the name and the way home stand
   on the page's own ground */
html:not(.room-live):not(.room-world-live) body[data-page=not-found] #hero-art .scene-fallback:not(#_g){display:none!important}
html:not(.room-live):not(.room-world-live) body[data-page=not-found] .hero-frame:not(#_g){background:var(--one-bit-ground,#ffffff)!important}
/* Explore on phones (audit P1-5): a station title never breaks inside a word ("Network ner/vous"); it may run wider than
   its card and steps down a size */
@media (max-width:700px){
 .gallery-stage .work-card .work-caption:not(#_u){width:max-content!important;max-width:min(86vw,560px)!important;flex-wrap:wrap}
 .gallery-stage .work-card .work-caption:not(#_u) h3{font-size:clamp(20px,6vw,26px)!important;word-break:normal!important;overflow-wrap:normal!important;hyphens:none!important;white-space:normal!important;width:auto!important;max-width:none!important;position:static!important;text-wrap:balance}
}
body .gal-now .gl-w{display:inline-block;white-space:nowrap}
/* Phones: the navigation stands in a third tab of the frame, at the bottom centre, in the thumb's reach (owner, 19 Oct:
   «давай навигашку на мобе внизу делать»). The tab hugs the pill (js/site-frame.js); opened, it rises into a sheet with
   the links above the buttons. The pill wears the frame's colours, like the brand and the controls in the top tabs:
   ink by day with paper on it, paper by night with ink. It never tucks away: it is part of the frame. */
@media (max-width:700px){
 html.has-frame body .site-header:not(#_u):not(#_v){top:auto!important;bottom:calc(var(--frame) + var(--frame-pad) + env(safe-area-inset-bottom,0px))!important;max-width:calc(100vw - 2*var(--frame) - 184px)!important;transition:max-width .5s cubic-bezier(.16,1,.3,1)!important}
 html.has-frame body .site-header:has(.glass-nav.menu-open):not(#_u):not(#_v){max-width:calc(100vw - 2*var(--frame) - 64px)!important}
 html.has-frame body .site-header .glass-nav:not(#_u):not(#_v){flex-wrap:wrap-reverse!important;background:transparent!important;box-shadow:none!important;border:0!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;color:var(--frame-on)!important;
  transition:padding .5s cubic-bezier(.16,1,.3,1)!important}
 html.has-frame body .site-header .glass-nav:not(#_u):not(#_v) :is(.nav-optics,.nav-liquid-backdrop){display:none!important}
 html.has-frame body .site-header .glass-nav:not(#_u):not(#_v)::before{display:none!important}   /* the pill's own fill: the tab is its ground now */
 html.has-frame body .site-header .glass-nav.menu-open:not(#_u):not(#_v){padding:10px 3px 3px 12px!important}
 html.has-frame body .site-header .glass-nav:not(#_u):not(#_v) .nav-contact{background:var(--frame-on)!important;color:var(--frame-ink)!important;border:1px solid var(--frame-on)!important;box-sizing:border-box!important}
 html.has-frame body .site-header .glass-nav:not(#_u):not(#_v) .nav-contact svg{color:var(--frame-ink)!important;stroke:currentColor}
 html.has-frame body .site-header .glass-nav:not(#_u):not(#_v) .menu-toggle{margin-left:auto;color:var(--frame-on)!important}
 html.has-frame body .site-header .glass-nav:not(#_u):not(#_v) .menu-toggle span{background:var(--frame-on)!important}
 html.has-frame body .site-header .glass-nav:not(#_u):not(#_v) .nav-links{transform:translateY(10px)}
 html.has-frame body .site-header .glass-nav.menu-open:not(#_u):not(#_v) .nav-links{transform:none;padding:4px 0 12px!important}
 html.has-frame body .site-header .glass-nav:not(#_u):not(#_v) :is(.nav-links>a,.nav-socials>a){color:var(--frame-on)!important;-webkit-text-fill-color:currentColor}
 html.has-frame body .site-header .glass-nav:not(#_u):not(#_v) .nav-links>a{padding:8px 0!important}
 html.has-frame body .site-header .glass-nav:not(#_u):not(#_v) .nav-socials{padding:12px 0 0!important}
 html.has-frame body .site-header .glass-nav:not(#_u):not(#_v) :is(.nav-links>a,.nav-socials>a,.nav-contact,.menu-toggle):focus-visible{outline:2px solid var(--frame-on);outline-offset:2px}
 html.has-frame body .site-header.is-tucked .glass-nav:not(#_u):not(#_v){transform:none!important;opacity:1!important;pointer-events:auto!important}
}
/* -73 (24 Oct, QA-73 row 5): the work orbit without the stations (the stills of html.airy) set its caption 6svh over the
   window's foot (css/airy.css), so on a phone the Next arrow stood on the frame's bottom tab. As the stations do on a phone
   (css/space-stations.css), the two arrows now stand beside the line, under the name: the caption is 76 px shorter, so on
   a short phone (375 x 667) the still's screens keep above the name, and it ends one gap (20 px) over the tab, whose top is
   the frame, two pads and the 48 px pill over the foot (js/site-frame.js) */
@media (max-width:700px){
 html:is(.space-on,.airy) .work-orbit:not(.is-stations) .work-orbit-info:not(#_u){display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;row-gap:16px;align-items:start}
 html:is(.space-on,.airy) .work-orbit:not(.is-stations) .work-orbit-caption:not(#_u){display:contents}
 html:is(.space-on,.airy) .work-orbit:not(.is-stations) .work-orbit-caption>.wo-title:not(#_u){grid-column:1/-1;grid-row:1}
 html:is(.space-on,.airy) .work-orbit:not(.is-stations) .work-orbit-caption>.wo-line:not(#_u){grid-column:1;grid-row:2;margin:0}   /* the gap is the grid's, so the arrows' top meets the line's */
 html:is(.space-on,.airy) .work-orbit:not(.is-stations) .work-orbit-info>.wo-steps:not(#_u){grid-column:2;grid-row:2;margin:0}
 html.has-frame:is(.space-on,.airy) .work-orbit:not(.is-stations) .work-orbit-info:not(#_u){bottom:calc(var(--frame) + 2*var(--frame-pad) + 48px + 20px + env(safe-area-inset-bottom,0px))}
}
/* the last lines of every page clear the nav's tab at the bottom of the frame */
@media (max-width:700px){html.has-frame body footer:not(#_u){padding-bottom:calc(var(--frame) + 76px + env(safe-area-inset-bottom,0px))!important}}
/* Grain (owner, 19 Oct, after Pixel Vault: «такой шум ещё на фоне добавляет глубины»; then «шум мягче намного, а то всё
   снежит»). Two sparse layers of one-pixel 1-bit dust over the live world, under the copy and the panels
   (js/3d/space-world.js puts it right after the world's canvas). They drift slowly in two directions at two speeds, so
   the air has depth and nothing flickers. They touch only the ground: paper dust screened onto the night's ink, ink dust
   multiplied onto the day's paper, sparser by day. Still under reduced motion. */
.world-grain{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;mix-blend-mode:multiply;opacity:0;transition:opacity .9s cubic-bezier(.16,1,.3,1)}
.world-grain::before,.world-grain::after{content:'';position:absolute;inset:-256px;background:url(../images/grain-day-a.png?v=2) 0 0/256px 256px repeat;image-rendering:pixelated;will-change:transform;animation:world-grain-a 140s linear infinite}
.world-grain::after{background-image:url(../images/grain-day-b.png?v=2);animation:world-grain-b 80s linear infinite}
html[data-theme=dark] .world-grain{mix-blend-mode:screen}
html[data-theme=dark] .world-grain::before{background-image:url(../images/grain-night-a.png)}
html[data-theme=dark] .world-grain::after{background-image:url(../images/grain-night-b.png)}
.space-world.is-ready~.world-grain{opacity:1}
html.space-leaving .world-grain{opacity:0;transition:opacity .25s cubic-bezier(.16,1,.3,1)}
@keyframes world-grain-a{to{transform:translate3d(-256px,-256px,0)}}
@keyframes world-grain-b{to{transform:translate3d(256px,-256px,0)}}
@media (prefers-reduced-motion:reduce){.world-grain::before,.world-grain::after{animation:none}}
/* the next-case card shows the next case's cover (16:10, the same object as its /work card) once covers v2 has it */
body.portfolio-case a.case-next .case-next-cover[src*="work-covers/"]{aspect-ratio:1.6;object-fit:cover}
/* The industries (the compositions report, proposal 5, 19 Oct): the word leads at up to 144 px and its glass form is
   printed in the page's ink with dotted coverage (js/one-bit.js "one-bit-alpha-*"), ink by day and paper by night, so
   each row has a dominant instead of an empty plate. */
html.one-bit:not([data-theme=dark]):is(.space-on,.airy) .industry-panel .industry-form>:is(img,canvas){filter:url(#one-bit-alpha-tone-ink)!important}   /* by day the forms' fine dark in ink and their body in the light greys (21 Oct: the fine dark alone printed pencil contours; the review of 21 Oct, fix 1). The theme is in the selector so it outranks `.design-principles canvas` above (one type more in its :is): without it a canvas here, the live forms' (js/3d/industry-forms.js), printed through the pictures' day curve by day, its bright glass paper on paper (21 Oct) */
html.one-bit[data-theme=dark]:is(.space-on,.airy) .industry-panel .industry-form>:is(img,canvas){filter:url(#one-bit-alpha-fine)!important}   /* by night only the forms' fine light: rims and glints on the black (19 Oct) */
html:is(.space-on,.airy) .design-principles .industry-copy h3:not(#_u){font-family:'Archivo Lens',Basel,Arial,sans-serif;font-variation-settings:normal;font-size:clamp(56px,10vw,144px)!important;line-height:1!important;letter-spacing:var(--t-track,-.02em)!important;margin:0 0 .18em!important}
/* Services (the compositions report, proposal 6, 19 Oct): four rows on about one screen, the names at up to 92 px with
   their lines under them, instead of four rows of half a screen each; the service glass keeps its place at the right */
html:is(.space-on,.airy) #services .service-rows>a:not(#_u){min-height:0!important;height:auto!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-content:start!important;column-gap:24px!important;padding:clamp(16px,2.6svh,30px) 0!important;margin:0!important}
html:is(.space-on,.airy) #services .service-rows>a>h3:not(#_u){grid-column:1;font-family:'Archivo Lens',Basel,Arial,sans-serif;font-variation-settings:normal;font-size:clamp(44px,6.4vw,92px)!important;line-height:1!important;letter-spacing:var(--t-track,-.02em)!important;margin:0 0 12px!important;max-width:none!important}
html:is(.space-on,.airy) #services .service-rows>a>p:not(#_u){grid-column:1;margin:0 0 6px!important}
html:is(.space-on,.airy) #services .service-rows>a>svg:not(#_u){grid-column:2;grid-row:1;align-self:start;width:28px;height:28px;margin-top:.6em}
@media (max-width:700px){html:is(.space-on,.airy) #services .service-rows>a>h3:not(#_u){font-size:clamp(36px,11vw,56px)!important}}
/* Year by year (the compositions report, proposal 3, 19 Oct): the fans grow to about a quarter of the frame and overlap
   the lower third of the digits; a year takes about three quarters of a screen of scroll instead of 86 %; the year's
   project names stand under its fan, not 600 px away at the left. The lone «All projects» screen after the stations
   goes: «And the rest. View all projects» closes the years with the same link. */
/* the world's pinned years are as long as their pass; the static column (reduced motion) is as long as its words: a
   fixed height there let the process section lie over «And the rest.» (22 Oct, verify/kbd/rmov.json) */
html:is(.space-on,.airy) .years-chapter:not(.is-static):not(#_u){--cw0:clamp(150px,21vw,340px);height:calc(100svh + (var(--panels,7) - 1)*72svh)}
html:is(.space-on,.airy) .years-chapter:not(.is-static) .year-info:not(#_u){left:50%;right:auto;bottom:clamp(40px,7svh,72px);max-width:min(64vw,760px);text-align:center;transform:translate3d(calc(-50% + var(--d,0)*-11vw),0,0)}
html:is(.space-on,.airy) .years-chapter:not(.is-static) .year-info .year-names:not(#_u){font-size:15px;line-height:1.5}
html:is(.space-on,.airy) #projects .work-more:not(#_u){display:none!important}
/* The years' names stand on an edge sheet (21 Oct; critique.md fix 4: the lanes' clears read as white pills floating on
   the sea, and the drift carried the longest list past the frame): one band of the page's own ground across the frame's
   bottom edge, rounded only on its free top corners, as tall as the active year's names need (js/chapters.js sets
   --yr-sheet; it eases in 450 ms on `clear`); the names sit centred on it and no longer drift with the swing */
html:is(.space-on,.airy) .years-chapter:not(.is-static) .years-stage::before{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--yr-sheet,0px);background:#ffffff;border-radius:16px 16px 0 0;transition:height 450ms cubic-bezier(.16,1,.3,1);pointer-events:none}
html[data-theme=dark]:is(.space-on,.airy) .years-chapter:not(.is-static) .years-stage::before{background:#000000}
html:is(.space-on,.airy) .years-chapter:not(.is-static) .year-info:not(#_u):not(#_v){left:50%;right:auto;bottom:calc(var(--frame,8px) + 18px);width:min(calc(100% - 2*var(--gutter,58px)),900px);max-width:none;transform:translate3d(-50%,0,0);text-align:center}
html:is(.space-on,.airy) .years-chapter:not(.is-static) .year-info .year-names:not(#_u):not(#_v){justify-content:center}
@media (max-width:700px){html:is(.space-on,.airy) .years-chapter:not(.is-static):not(#_u){--cw0:clamp(120px,44vw,230px);height:calc(100svh + (var(--panels,7) - 1)*70svh)}
 html:is(.space-on,.airy) .years-chapter:not(.is-static) .year-info:not(#_u){max-width:calc(100% - 32px);bottom:96px}}
@media (max-width:700px){html:is(.space-on,.airy) .years-chapter:not(.is-static) .year-info:not(#_u):not(#_v){bottom:calc(84px + env(safe-area-inset-bottom,0px));width:calc(100% - 32px)}}
/* the footer's grey radial glow was continuous tone on a 1-bit page; the world and the orb carry the dawn */
html.one-bit :is(.footer-top)::before{background:none!important}
/* The Pass teaser (the compositions report, proposal 8, 19 Oct): the headline at up to 120 px across the top band, the
   line and the link beside it, and the laptop as the plate's dominant over the lower part, cropped by the plate's
   bottom edge, instead of a small render beside the copy and an empty lower half */
@media (min-width:701px){
 html:is(.space-on,.airy,.room-world-live) body .pass-section.pass-feature:not(#_u){width:100%!important;max-width:none!important;box-sizing:border-box!important;display:grid!important;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)!important;grid-template-rows:auto auto minmax(0,1fr)!important;column-gap:4vw!important;row-gap:0!important;min-height:min(100svh,1000px)!important;padding:clamp(72px,11svh,128px) var(--gutter,58px) 0!important;margin:0!important;overflow:hidden!important}
 html:is(.space-on,.airy,.room-world-live) body .pass-feature .pass-copy:not(#_u){display:contents!important}
 html:is(.space-on,.airy,.room-world-live) body .pass-feature .pass-copy h2:not(#_u){grid-column:1;grid-row:1/span 2;align-self:start;font-size:clamp(56px,8.3vw,120px)!important;line-height:.92!important;margin:0!important}
 html:is(.space-on,.airy,.room-world-live) body .pass-feature .pass-copy>p:not(#_u){grid-column:2;grid-row:1;align-self:end;margin:0 0 24px!important;max-width:26em}
 html:is(.space-on,.airy,.room-world-live) body .pass-feature .pass-copy>.text-button:not(#_u){grid-column:2;grid-row:2;align-self:start;justify-self:start}
 html:is(.space-on,.airy,.room-world-live) body .pass-feature .pass-image:not(#_u){grid-column:1/-1;grid-row:3;justify-self:center;align-self:end;width:min(64vw,1100px)!important;max-width:none!important;height:auto!important;margin:clamp(24px,5svh,56px) 0 -7svh!important;position:relative!important;transform:none!important}
 html:is(.space-on,.airy,.room-world-live) body .pass-feature .pass-image img:not(#_u){width:100%!important;height:auto!important;max-height:none!important;object-fit:contain!important}
}
/* the services by day: the tube's poster at the right, printed in dotted ink like the industry forms (js/3d/space-icons.js) */
/* (owner, 19 Oct: «в нашем стиле должно быть») the tube prints through the world's own tone dither, its shading as dots,
   never as a solid silhouette */
html.one-bit:not([data-theme=dark]):is(.space-on) .service-rows .service-morph .service-morph-poster:not([hidden]){display:block!important;opacity:1!important;filter:url(#one-bit-alpha-fine-ink)!important}   /* only the tube's fine dark, as the industry forms by day (20 Oct) */
/* The Pass teaser shows the product itself (owner, 19 Oct: «ноутбук синевой отдаёт… лучше Pass показать, может в мобе
   интерфейс»): three monochrome shots from the case (two phones, the generator on a laptop) in a row, cropped by the
   plate's bottom edge, instead of the navy laptop render of the old world. Phones: a row that scrolls sideways. */
html body .pass-feature .pass-image.pass-phones:not(#_u){display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:clamp(10px,1.4vw,22px)!important;height:auto!important;background:none!important;border-radius:0!important;overflow:visible!important}
html body .pass-feature .pass-image.pass-phones img:not(#_u){display:block;width:100%!important;height:auto!important;aspect-ratio:4/5!important;object-fit:cover!important;object-position:50% 38%!important;border-radius:12px!important;max-height:none!important;transform:none!important}
@media (min-width:701px){html:is(.space-on,.airy,.room-world-live) body .pass-feature .pass-image.pass-phones:not(#_u){width:min(74vw,1180px)!important;margin:clamp(28px,6svh,64px) 0 -9svh!important;left:auto!important;right:auto!important;inset:auto!important;translate:none!important}}
@media (max-width:700px){
 html body .pass-feature .pass-image.pass-phones:not(#_u){display:flex!important;gap:10px!important;width:calc(100% + 56px)!important;margin:28px -28px 0!important;padding:0 28px!important;overflow-x:auto!important;scroll-snap-type:x mandatory;scrollbar-width:none}
 html body .pass-feature .pass-image.pass-phones img:not(#_u){flex:0 0 64vw;width:64vw!important;scroll-snap-align:center}
}
/* The recognition hover preview (About) shows the work's card from /work (covers v2, 444:505), in the image radius, without
   the glass rim (19 Oct) */
html.one-bit .ri-preview:not(#_u){width:clamp(200px,17vw,300px);aspect-ratio:444/505;border-radius:10px}
html.one-bit .ri-preview.is-on:not(#_u){clip-path:inset(0 0 0 0 round 10px)}
html.one-bit .ri-frame img:not(#_u){object-fit:cover}
html.one-bit .ri-preview::after{display:none!important}
/* The 404's hero copy stands on its own folds scene (a separate canvas the world's lanes cannot clear). No plates (owner,
   19 Oct: «я ж просил не делать подложки… на фон — в таком же стиле движущуюся точками текстуру»): behind the person line
   and the way home a cloud of the page's own colour is printed in the same Bayer dots (its coverage dithered,
   js/one-bit.js "one-bit-alpha-*"), solid at the words and thinning into the folds' dots at its edge; it breathes slowly,
   so its dots move. The particle head (an old blue avatar) goes grey. */
html.one-bit body .hero-frame :is(.hero-person,.hero-explore):not(#_u){position:relative;isolation:isolate;width:fit-content}   /* the cloud sits on the words, not on the row's full width */
html.one-bit body .hero-frame :is(.hero-person,.hero-explore):not(#_u)::before{content:'';position:absolute;z-index:-1;inset:-30px -48px;pointer-events:none;
 background:radial-gradient(closest-side,rgba(255,255,255,.86) 48%,rgba(255,255,255,0) 100%) 50% 50%/100% 100% no-repeat;filter:url(#one-bit-alpha-paper);animation:one-bit-breathe 7s ease-in-out infinite alternate}
html.one-bit[data-theme=dark] body .hero-frame :is(.hero-person,.hero-explore):not(#_u)::before{filter:url(#one-bit-alpha-ink)}
@keyframes one-bit-breathe{from{background-size:100% 100%;background-position:50% 50%}to{background-size:112% 118%;background-position:46% 54%}}
/* the head script marks the page one-bit before the modules load (js/portfolio-theme.js, 21 Oct): until js/one-bit.js has
   drawn its filters (html.ob-ready) the dotted grounds would show as their raw white gradient, so there is none yet */
html.one-bit:not(.ob-ready):not(#_ob):not(#_oc) :is(.hero-frame .hero-copy h1,.hero-frame .hero-copy .hero-note,#design-bottom .process-panel p,#about .about-intro>p,[data-rg]:not([data-rg=after]),.hero-frame .hero-person,.hero-frame .hero-explore,body[data-page=about] .about-opening-copy)::before,
html.one-bit:not(.ob-ready):not(#_ob):not(#_oc) [data-rg=after]::after{background:none!important;filter:none!important;animation:none!important}
@media (prefers-reduced-motion:reduce){html.one-bit body .hero-frame :is(.hero-person,.hero-explore)::before{animation:none}}
html.one-bit body .hero-frame .hero-person img:not(#_u){filter:grayscale(1) contrast(1.2)}
/* The Pass teaser, second take (owner, 19 Oct: «в Pass галерею скринов движущуюся, только не такую большую, что-то
   похожее, как мы делаем с логотипами»): a stream of the product's screens, desktop and phone, about 200 px tall, moving
   slowly across the plate's full width like the logo marquee; it pauses under the pointer and stands still under
   reduced motion. The set is written twice in the markup (the second aria-hidden) so the loop is seamless. */
html body .pass-feature .pass-image.pass-stream:not(#_u){display:block!important;overflow:hidden!important;height:auto!important;background:none!important;border-radius:0!important;padding:0!important;transform:none!important}
html body .pass-feature .pass-stream .pass-lane{display:flex;gap:16px;width:max-content;animation:pass-stream 76s linear infinite}
html body .pass-feature .pass-stream .pass-set{display:flex;gap:16px;flex:none}
html body .pass-feature .pass-stream img:not(#_u),html:is(.space-on,.airy,.room-world-live) body .pass-feature .pass-image.pass-stream img:not(#_u){-webkit-mask-image:none!important;mask-image:none!important;display:block;flex:none;width:auto!important;height:clamp(140px,14.5vw,224px)!important;max-width:none!important;max-height:none!important;object-fit:cover!important;border-radius:10px!important;transform:none!important}
html body .pass-feature .pass-stream:is(:hover,:focus-visible) .pass-lane{animation-play-state:paused}
@keyframes pass-stream{to{transform:translate3d(calc(-50% - 8px),0,0)}}
@media (prefers-reduced-motion:reduce){html body .pass-feature .pass-stream .pass-lane{animation:none}}
@media (min-width:701px){html:is(.space-on,.airy,.room-world-live) body .pass-feature .pass-image.pass-stream:not(#_u){width:calc(100% + 2*var(--gutter,58px))!important;margin:clamp(40px,8svh,96px) calc(-1*var(--gutter,58px)) clamp(48px,9svh,110px)!important;justify-self:stretch!important;align-self:start!important}
 html:is(.space-on,.airy,.room-world-live) body .pass-section.pass-feature:not(#_u){min-height:0!important}}
@media (max-width:700px){html body .pass-feature .pass-image.pass-stream:not(#_u){width:calc(100% + 56px)!important;margin:28px -28px 0!important}}
/* the Pass feature on About (a room page): by day its copy reads in ink too, as on the home (it kept the old world's white) */
html.one-bit:not([data-theme=dark]).room-world-live body .pass-feature :is(#pass-title,#pass-title *,.pass-copy>p):not(#_u){color:#000000!important;-webkit-text-fill-color:#000000}
html.one-bit[data-theme=dark].room-world-live body .pass-feature :is(#pass-title,#pass-title *,.pass-copy>p):not(#_u){color:#ffffff!important;-webkit-text-fill-color:#ffffff}
/* Dot clouds (owner, 19 Oct: «правило с подложкой нигде не работает… не подложку, а в стиле анимаций — в движении,
   точечками, белыми или чёрными от ситуации»). Wherever copy still needs a calmer ground and the world's lanes do not
   reach it (the stills, scenes on their own canvas, the About opening), the ground is a cloud printed in the same Bayer
   dots, paper dots by day and ink dots by night, solid at the words and thinning at its edge, and it breathes slowly.
   Never a flat or blurred plate. */
html.one-bit:is(.space-on,.airy) .hero-frame .hero-copy :is(h1,.hero-note)::before,
html.one-bit #design-bottom .process-panel p::before,
html.one-bit #about .about-intro>p::before,
html.one-bit [data-rg]:not([data-rg=after])::before,html.one-bit [data-rg=after]::after,
html.one-bit body[data-page=about] .about-opening-copy:not(#_u)::before{
 background:radial-gradient(closest-side,rgba(255,255,255,.9) 50%,rgba(255,255,255,0) 100%) 50% 50%/100% 100% no-repeat!important;
 filter:url(#one-bit-alpha-paper)!important;opacity:1!important;border-radius:0!important;animation:one-bit-breathe 7s ease-in-out infinite alternate}
html.one-bit[data-theme=dark]:is(.space-on,.airy) .hero-frame .hero-copy :is(h1,.hero-note)::before,
html.one-bit[data-theme=dark] #design-bottom .process-panel p::before,
html.one-bit[data-theme=dark] #about .about-intro>p::before,
html.one-bit[data-theme=dark] [data-rg]:not([data-rg=after])::before,html.one-bit[data-theme=dark] [data-rg=after]::after,
html.one-bit[data-theme=dark] body[data-page=about] .about-opening-copy:not(#_u)::before{filter:url(#one-bit-alpha-ink)!important}
@media (prefers-reduced-motion:reduce){html.one-bit :is([data-rg],#design-bottom .process-panel p,#about .about-intro>p,.hero-frame .hero-copy :is(h1,.hero-note),body[data-page=about] .about-opening-copy)::before,html.one-bit [data-rg=after]::after{animation:none!important}}
/* where the live world runs, its lanes carry the About opening's lead too, so its CSS cloud steps aside (19 Oct) */
html.one-bit.lanes body[data-page=about] .about-opening-copy:not(#_u)::before{display:none!important}
/* the 404's way home reads in the page's ink, like the rest of its hero copy */
html.one-bit:not([data-theme=dark]).room-live body .hero-frame :is(.hero-explore,.hero-explore>span:first-child):not(#_u){color:#000000!important}
html.one-bit[data-theme=dark].room-live body .hero-frame :is(.hero-explore,.hero-explore>span:first-child):not(#_u){color:#ffffff!important}
/* Explore on phones (audit 19 Oct): the practice heading kept the desktop's sticky offset (top 128px) as a relative shift
   and sat on its own paragraph */
@media (max-width:900px){body .explore-practice.is-focus .explore-practice-intro h2:not(#_u){position:static!important;top:auto!important}}
/* The case film as a full-viewport band (js/case-film-band.js, 19 Oct; the motion report, proposal 5): the lead film fills
   the viewport and meets the page through stepped edges of the page's own colour; its caption stays in the column */
body.portfolio-case figure.series-video.is-band:not(#_u){justify-self:stretch!important;max-width:none!important;width:auto!important;margin-left:calc(-1*var(--gutter,58px))!important;margin-right:calc(-1*var(--gutter,58px))!important;background:none!important;border-radius:0!important;padding:0!important}
body.portfolio-case figure.series-video.is-band .film-band{position:relative;height:100svh;overflow:hidden;background:#000000}
body.portfolio-case figure.series-video.is-band .film-band video:not(#_u){position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none;aspect-ratio:auto!important;object-fit:cover!important;border-radius:0!important;cursor:pointer}
body.portfolio-case figure.series-video.is-band .band-edge{position:absolute;left:0;right:0;width:100%;display:block;pointer-events:none;z-index:1}
body.portfolio-case figure.series-video.is-band .band-edge.is-top{top:-1px}
body.portfolio-case figure.series-video.is-band .band-edge.is-bottom{bottom:-1px}
body.portfolio-case figure.series-video.is-band figcaption:not(#_u){padding:14px var(--gutter,58px) 0;margin:0}
/* (QA-73 row 22) the band's caption runs the window's full width (its padding is the gutter), so the reading ground's
   12 px overhang (the grounds below) ran past both edges and widened the page to 402 px on a phone: the ground keeps to
   the caption's own width */
html.one-bit:not(.lanes):not(#_g) body.portfolio-case figure.series-video.is-band>figcaption[data-rg]:not([data-rg=after])::before,
html.one-bit:not(.lanes):not(#_g) body.portfolio-case figure.series-video.is-band>figcaption[data-rg=after]::after{inset:-12px 0!important}
body.portfolio-case figure.series-video.is-band .band-toggle{position:absolute;z-index:2;right:clamp(16px,2.4vw,32px);bottom:calc(clamp(16px,2.4vw,32px) + 4*58px);width:44px;height:44px;border:0;border-radius:999px;background:#ffffff;color:#000000;cursor:pointer;display:grid;place-items:center;padding:0}
body.portfolio-case figure.series-video.is-band .band-toggle::before{content:'';width:12px;height:14px;background:linear-gradient(90deg,currentColor 0 4px,transparent 4px 8px,currentColor 8px 12px)}
body.portfolio-case figure.series-video.is-band .band-toggle[data-state=paused]::before{width:0;height:0;background:none;border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent currentColor;margin-left:3px}
body.portfolio-case figure.series-video.is-band .band-toggle:focus-visible{outline:2px solid #ffffff;outline-offset:3px}
/* (Olya ~11:25Z: «убирай на всех движениях паузу это лишнее») the film's own toggle for the keyboard only: out of sight until
   Tab reaches it; a click or a tap on the film stops it or plays it on (js/case-film-band.js, js/case-video.js) */
body.portfolio-case figure.series-video.is-band .band-toggle:not(:focus-visible){width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%)}
@media (max-width:700px){body.portfolio-case figure.series-video.is-band .film-band{height:calc(100vw*9/16)}   /* phones: edge to edge at the film's own ratio, nothing cropped */
 body.portfolio-case figure.series-video.is-band .band-toggle{bottom:auto;top:calc(8px + 2*32px);right:12px;width:36px;height:36px}}
/* No plates behind copy in the 1-bit world (owner, 19 Oct: «правило с подложкой нигде не работает, если это только не
   большая карточка»): the Approach step panels and the About case links lose their translucent glass plates; their copy
   reads on the world's lanes like the rest. Real cards (the station panel, the /work sheet, the covers) keep their paper. */
html.one-bit body[data-page=approach] :is(.cycle-panel,.cycle-detail,.practice-detail,.approach-intro):not(#_u),
html.one-bit body[data-page=about] .cs-cases>a:not(#_u){background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important;border-color:transparent!important}
html.one-bit body[data-page=about] .cs-cases>a:not(#_u){border-bottom:0!important}
/* No eyebrows (owner, 19 Oct: «не делать надзаголовки»): the next-case card names its role after the title, not above it;
   the years chapter's «Year by year» label above the digits goes (the section keeps its accessible name) */
body.portfolio-case a.case-next:has(.case-next-cover):not(#_u){grid-template-rows:1fr auto auto!important}
body.portfolio-case a.case-next:has(.case-next-cover)>h2:not(#_u){grid-row:1/span 2!important}
body.portfolio-case a.case-next:has(.case-next-cover)>span:first-child:not(#_u){grid-row:3!important;align-self:start!important;margin:14px 0 0!important}
body.portfolio-case a.case-next:has(.case-next-cover)>.ui-arrow:not(#_u){grid-row:1!important}
body.portfolio-case a.case-next .case-next-cover:not(#_u){grid-row:1/span 3!important}
html:is(.space-on,.airy,.room-world-live) .years-chapter .years-kicker:not(#_u){display:none!important}
/* phones: one column; the cover first, then the title, then its role (never stacked over each other) */
@media (max-width:700px){
 body.portfolio-case a.case-next:has(.case-next-cover):not(#_u){grid-template-columns:1fr!important;grid-template-rows:auto auto auto!important}
 body.portfolio-case a.case-next .case-next-cover:not(#_u){grid-column:1!important;grid-row:1!important;margin:0 0 18px!important}
 body.portfolio-case a.case-next:has(.case-next-cover)>h2:not(#_u){grid-column:1!important;grid-row:2!important}
 body.portfolio-case a.case-next:has(.case-next-cover)>span:first-child:not(#_u){grid-column:1!important;grid-row:3!important}
 body.portfolio-case a.case-next:has(.case-next-cover)>.ui-arrow:not(#_u){grid-column:1!important;grid-row:2!important;justify-self:end!important;align-self:center!important}
}

/* ---- White and cold ink (19 Oct, the owner: «уберём шум с фона… шрифт холодный чёрный… в тёмной теме у нас инверсия
   получается… иллюстрации холодный тёмный серый, но не чёрный… и в тёмной сюжет не белый, а такой приглушённый»; then
   «давай всё-таки фон белым делать, а не светло-серым»).
   A white ground with no grain, cold black type; the world's dithered illustrations print in a cold dark grey instead
   of black; by night the same page goes dark instead of inverting the frame to white, and the illustrations go muted
   instead of white. Chips and the floating nav take a cold light grey so they still read on white. The frame round the
   interface stays the type's cold black. */
/* black is #000000 (owner, 19 Oct: «наш чёрный именно 000000»); greys are true greys */
:root{--cool-ground:#ffffff;--cool-ink:#000000;--cool-muted:#585b61;--cool-card:#ffffff;--cool-line:#dfe2e8;--cool-chip:#eceff5;--cool-chip-hover:#e2e5eb}
:root[data-theme=dark]{--cool-ground:#000000;--cool-ink:#ffffff;--cool-muted:#96999f;--cool-card:#000000;--cool-line:#272a30;--cool-chip:#181b21;--cool-chip-hover:#22252b}
:root,:root[data-theme=dark]{--paper:var(--cool-ground);--ink:var(--cool-ink);--muted:var(--cool-muted);--line:var(--cool-line);
 --surface:var(--cool-ground);--raised:var(--cool-card);--footer-surface:var(--cool-ground);--hero-ink:var(--cool-ink);
 --nav-ink:var(--cool-ink);--ui-bg:var(--cool-ink);--ui-fg:var(--cool-ground)}
/* the frame round the interface: the type's cold black by day (the owner: «в светлой же чёрная рамка, как цвет шрифта»),
   white by night (19 Oct, later) */
:root:not([data-theme=dark]){--frame-ink:var(--cool-ink);--frame-on:#ffffff}
:root[data-theme=dark]{--frame-ink:#ffffff;--frame-on:#000000}   /* by night the frame is white, the mirror of the day's black (owner, 19 Oct: «а где в тёмной теме белая обводка») */
:root:not([data-theme=dark]){--nav-fill:rgba(236,239,245,.9);--nav-rule:rgba(255,255,255,.9)}
:root[data-theme=dark]{--nav-fill:rgba(24,27,33,.9);--nav-rule:rgba(255,255,255,.08)}
html,html[data-room],html[data-room]:not([data-theme=dark]){background:var(--cool-ground)!important}
html body{color:var(--cool-ink)}
/* no grain: neither the world's nor the page's */
.world-grain,html.has-field body::after,html[data-room] body::after{display:none!important}
/* the brand mark on the frame: paper on the black frame, by day and by night */
html.has-frame .frame-brand img,html.has-frame[data-theme=dark] .frame-brand img{filter:invert(1)!important}
html.has-frame[data-theme=dark] body .frame-brand img:not(#_u){filter:none!important}   /* the dark mark on the white night frame */
html[data-theme=dark] body .site-header .glass-nav:not(#_u) .brand img{filter:brightness(0) invert(1)!important}
/* the illustrations (owner, 19 Oct, later: «в тёмной объекты красивее… сюжеты в тёмной белые, в светлой — тёмным нашим»):
   the world prints in the page's own colours, set in the shader (js/3d/glass-post.js, js/3d/space-world.js): by day
   cold ink dots on white, by night white dots on the dark ground; no filter, no veil over it */
.room-world,.space-world,html[data-theme=dark] .room-world,html[data-theme=dark] .space-world{filter:none!important}
html[data-room] .room-veil,html[data-room][data-theme=dark] .room-veil{background:none!important}
/* Work: the sheet is the ground, solid, so the world's dots never show between the cards */
html body[data-page=work] .work-sheet:not(#_v){background:var(--cool-ground)!important;color:var(--cool-ink)!important}
html body[data-page=work] .work-sheet #cardContainer .work-card:nth-child(n):not(#_u):not(#_v)>p{color:var(--cool-muted)!important}
html body[data-page=work] .work-sheet #cardContainer .work-card:nth-child(n) .work-caption:not(#_u):not(#_v)>span{color:var(--cool-muted)!important}
html[data-theme=dark] body[data-page=work] .work-sheet #cardContainer .work-card:nth-child(n) .work-caption:not(#_u):not(#_v),
html[data-theme=dark] body[data-page=work] .work-sheet #cardContainer .work-card:nth-child(n) .work-caption:not(#_u):not(#_v) h3{color:var(--cool-ink)!important}
html body[data-page=work] .work-sheet .filters:not(#_u):not(#_v){justify-content:flex-start!important}
html body[data-page=work] .work-sheet .filters:not(#_u):not(#_v)>button{background:var(--cool-chip)!important;color:var(--cool-ink)!important;flex:none!important}
html body[data-page=work] .work-sheet .filters:not(#_u):not(#_v)>button:hover{background:var(--cool-chip-hover)!important}
html body[data-page=work] .work-sheet .filters:not(#_u):not(#_v)>button[aria-pressed=true]{background:var(--cool-ink)!important;color:var(--cool-ground)!important}
/* phones under about 380px (the owner's bug, 19 Oct): the bottom tab was capped at 100vw - frame - 184px, 120px at 320,
   so the menu and «Let's talk» wrapped onto two rows and the button's words onto two lines. The closed pill gets room for
   both on one row (the links keep their own zero-height row above, so the sheet still rises when opened). */
@media (max-width:700px){
 html.has-frame body .site-header:not(:has(.glass-nav.menu-open)):not(#_u):not(#_v){max-width:max(190px,calc(100vw - 2*var(--frame) - 184px))!important}
 html.has-frame body .site-header .glass-nav:not(#_u):not(#_v) .nav-contact{white-space:nowrap!important}
}
/* a case with no wide cover yet shows its 4:5 cover whole, on the cover's own flat ground (js: tools covers-formats) */
body.portfolio-case a.case-next .case-next-cover.is-portrait-cover:not(#_u){object-fit:contain!important}
/* No shapes behind copy at all (owner, 19 Oct: «не красивые подложки… делай фон сюжета, чтобы читалось… высвечивать
   стороны, где текст»): every CSS ground and dot cloud goes; the world itself lightens toward the copy's side
   (js/3d/space-lanes.js, the calm ramp in js/3d/glass-post.js) */
html.one-bit :is([data-rg]:not([data-rg=after]),#design-bottom .process-panel p,#about .about-intro>p,.hero-frame .hero-copy :is(h1,.hero-note),body[data-page=about] .about-opening-copy,.hero-frame :is(.hero-person,.hero-explore))::before,
html.one-bit [data-rg=after]::after{display:none!important;content:none!important}
/* the stills have no lanes (22 Oct, the eye sweep at 390): with the CSS grounds gone, small copy over a still's sea by
   day read grey on grey dots (the CV's experience, About's Fourmeta, Explore's lede). Until the live world runs and
   clears its lanes (html.lanes), that copy keeps a 2 px edge of the page's own colour round its letters, crisp, no
   blur: the dots step back from the type as they do from the lanes, and no shape stands behind the block */
/* -73 (P0 rule 2, the coordinator ~12:15Z after Olya ~12:05Z «…подложки белые в светлой и черные в темной…»; QA-73 rows
   12, 14-16): the 2 px edge left the print under the words (the CV's experience grey on the rays by day; the home's
   statement at 390 by night, whose words fill through a clipped gradient, drawn black by the edge over the fill). Copy on
   a still now reads on a ground of the page's own colour: solid under the block, feathered 12 px past it and printed in the
   world's own 1-bit dots, so the dots step back from the words as the live world's lanes do. Nine layers that do not
   overlap build the feather (a solid middle, four edges, four corners), with no blur; the footer's honours band and
   /about's awards table carry the same ground (css/honours-2026.css). It gives way to the lanes once they run. */
html.one-bit:not(.lanes):not(#_g) [data-rg]{text-shadow:none}
html.one-bit:not(.lanes):not(#_g) .cycle-tab{isolation:isolate}
html.one-bit:not(.lanes):not(#_g) .work-orbit:not(.is-stations) .work-orbit-info{isolation:isolate}
/* (QA-73 row 16) the stage names round /approach's cycle are controls on the world, so they take the ground too: by night
   the still's horizon ran through «Prototype» on phones. (Row 5) The work orbit's caption takes one ground for its name,
   line and arrows: the arrows' white discs lost their edge on the night sea's light at 430, and two grounds side by side
   printed their shared feather as a dotted seam */
html.one-bit:not(.lanes):not(#_g) [data-rg]:not([data-rg=after])::before,html.one-bit:not(.lanes):not(#_g) [data-rg=after]::after,html.one-bit:not(.lanes):not(#_g) .cycle-tab::before,html.one-bit:not(.lanes):not(#_g) .work-orbit:not(.is-stations) .work-orbit-info::before{content:''!important;display:block!important;
 position:absolute!important;z-index:-1;inset:-12px!important;pointer-events:none;border-radius:0!important;opacity:1!important;animation:none!important;
 --f:12px;--g:rgba(255,255,255,.95);--z:rgba(255,255,255,0);
 background:linear-gradient(var(--g),var(--g)) var(--f) var(--f)/calc(100% - 2 * var(--f)) calc(100% - 2 * var(--f)) no-repeat,
  linear-gradient(0deg,var(--g),var(--z)) var(--f) 0/calc(100% - 2 * var(--f)) var(--f) no-repeat,
  linear-gradient(180deg,var(--g),var(--z)) var(--f) 100%/calc(100% - 2 * var(--f)) var(--f) no-repeat,
  linear-gradient(90deg,var(--z),var(--g)) 0 var(--f)/var(--f) calc(100% - 2 * var(--f)) no-repeat,
  linear-gradient(270deg,var(--z),var(--g)) 100% var(--f)/var(--f) calc(100% - 2 * var(--f)) no-repeat,
  radial-gradient(farthest-side at 100% 100%,var(--g),var(--z)) 0 0/var(--f) var(--f) no-repeat,
  radial-gradient(farthest-side at 0 100%,var(--g),var(--z)) 100% 0/var(--f) var(--f) no-repeat,
  radial-gradient(farthest-side at 100% 0,var(--g),var(--z)) 0 100%/var(--f) var(--f) no-repeat,
  radial-gradient(farthest-side at 0 0,var(--g),var(--z)) 100% 100%/var(--f) var(--f) no-repeat!important;
 filter:url(#one-bit-alpha-paper)!important}
html.one-bit[data-theme=dark]:not(.lanes):not(#_g) [data-rg]:not([data-rg=after])::before,html.one-bit[data-theme=dark]:not(.lanes):not(#_g) [data-rg=after]::after,html.one-bit[data-theme=dark]:not(.lanes):not(#_g) .cycle-tab::before,html.one-bit[data-theme=dark]:not(.lanes):not(#_g) .work-orbit:not(.is-stations) .work-orbit-info::before{filter:url(#one-bit-alpha-ink)!important}
/* (QA-73 row 21) a phone's service rows set every child static (css/portfolio-polish-v54.css:463), over the position
   js/reading-ground.js gives a grounded block, so each ground spanned the whole row and the later ones painted over the
   name and its line: a grounded child keeps its own box */
@media (max-width:700px){body[data-page=home] .has-service-morph>a>[data-rg]{position:relative!important}}
/* the years cards show covers v2 whole (the cover is 4:5, the card a little taller): the card takes the cover's ground */
.years-chapter .year-card.has-cover .year-card-preview img{object-fit:cover;object-position:50% 50%}
/* the type ribbon over the world (js/3d/type-ribbon.js): ink and paper, its shading printed through the world's dither */
html.one-bit:not([data-theme=dark]) .type-ribbon canvas{filter:url(#one-bit-day-object)}
html.one-bit[data-theme=dark] .type-ribbon canvas{filter:url(#one-bit-night-object)}
html:is(.space-on,.airy) body .type-band.has-ribbon:not(#_u){border:0!important}

/* the process step's copy on a sheet at the frame's bottom edge (owner, 19 Oct: «современные белые плашки с крутой
   композицией», after the home station panel): paper by day, ink by night, rounded only where it is free; the step's
   name stays on the world. The scenes box ends 96 px above the sticky stage, which ends 8 px above the frame's edge; its
   right edge sits 7.3vw in, so -4.5vw puts the sheet on the station panel's 2.8vw margin */
@media (min-width:701px){
 html:is(.space-on,.airy) .process-scroll.process-interactive .process-panel p:not(#_u){position:absolute!important;right:-4.5vw;bottom:-104px;
  width:min(31vw,460px);max-width:none;margin:0;padding:22px 24px 34px;background:#ffffff;color:#000000;border-radius:16px 16px 0 0;
  font-size:clamp(16px,1.25vw,19px);line-height:1.45;text-wrap:pretty}
}
html[data-theme=dark]:is(.space-on,.airy) .process-scroll.process-interactive .process-panel p:not(#_u){background:#000000;color:#ffffff}
html.one-bit #design-bottom .process-panel p:not(#_u)::before{display:none!important;content:none!important}
/* on phones the same sheet spans the frame from edge to edge, as the station panel does there, and clears the nav's tab;
   it stays in the flow, so the step's name rises above it. The scenes box sits 36 px in from the frame's inner edge and
   40 px above it at 390 */
@media (max-width:700px){
 html:is(.space-on,.airy) .process-scroll.process-interactive .process-panel p:not(#_u){position:relative!important;margin:18px -36px -40px;
  padding:16px 36px calc(84px + env(safe-area-inset-bottom,0px));min-height:0;background:#ffffff;color:#000000;border-radius:16px 16px 0 0}
}
/* the years rise while the last station sinks into the clouds: no empty sky between the two chapters (20 Oct; the
   stations fade over the last 7 % of their stage, and the years' title stood 200 px below the stage's end) */
html:is(.space-on,.airy) main > #years:not(#_u){margin-top:-45svh}
/* phones: each service stacks in one column (20 Oct: the role line took a 205 px second column, and «Digital product»
   was cut to «Digital produc» in the 117 px left) */
@media (max-width:700px){html:is(.space-on,.airy) body .service-rows>a:not(#_u):not(#_v){display:block!important}
 html:is(.space-on,.airy) body .service-rows>a:not(#_u):not(#_v)>svg{display:none!important}}
/* phones: the services' tube is big, a frame wide, held at mid-height while the four services pass, its centre at about
   four fifths of the width so it bleeds off the right; it dissolves into the ground before the frame edge and clears
   round the words (glass-post.js subjFade, laneSubj). 21 Oct, the owner: «маленькая не смотрится… под текстом или на
   вылет справа, но не зарезать, а как в тень уходить» */
@media (max-width:700px){
 html:is(.space-on,.airy) main>#services:not(#_u){overflow-x:clip}
 html:is(.space-on,.airy) body .service-rows.has-service-morph>.service-morph:not(#_u){position:sticky!important;top:calc(50svh - 50vw)!important;left:auto!important;right:auto!important;
  align-self:flex-end;margin:0 -34vw -100vw auto!important;width:100vw!important;height:100vw!important;z-index:0}
 html:is(.space-on,.airy) body .service-rows.has-service-morph>a:not(#_u):not(#_v){max-width:100%!important;position:relative;z-index:1}
 html:is(.space-on,.airy) #services .service-rows>a>h3:not(#_u):not(#_v){font-size:clamp(34px,9vw,48px)!important}
}
/* by night on phones the services' tube is its poster, printed through its fine light (js/3d/space-icons.js) */
@media (max-width:700px){html.one-bit[data-theme=dark]:is(.space-on) .service-rows .service-morph .service-morph-poster:not([hidden]){display:block!important;opacity:1!important;filter:url(#one-bit-alpha-fine)!important}}
/* (-73, S19; hold17 at .75 on a phone: the copy's lanes cut the big tube into slivers, a streak of light by night and dotted
   patches by day, a ghost, never the whole form; it cannot stand whole under the words) a phone's services stretch is its
   type alone: the box goes, and with it the tube (js/3d/space-icons.js hides it when its box has no size) and its poster;
   ?tube=phone brings it back (js/3d/space-world.js) */
@media (max-width:700px){html:is(.space-on,.airy):not(.tube-phone) body .service-rows.has-service-morph>.service-morph:not(#_u):not(#_v){display:none!important}}
/* the journey index (seven dots on the right) is gone (owner, 20 Oct: «индекс точек может убрать»); it overlapped the Pass screens and the footer button */
html body nav.space-index:not(#_u){display:none!important}

/* The colour switch (20 Oct; js/portfolio-theme.js): the second control from the right in the controls' tab, between the
   theme and the sound, in the frame's colours like its neighbours; the sound and the OS entry move one place left. The
   icon is four dots: outlined in black and white, filled in colour. */
html.has-frame body .site-header .colour-toggle:not(#_u):not(#_v){position:fixed!important;z-index:51!important;top:calc(var(--frame) + var(--frame-pad))!important;bottom:auto!important;left:auto!important;
 right:calc(var(--frame) + var(--frame-pad) + var(--frame-ctl) + var(--frame-gap))!important;width:var(--frame-ctl)!important;height:var(--frame-ctl)!important;margin:0!important;padding:0!important;
 display:grid!important;place-items:center;border-radius:50%;background:transparent!important;color:var(--frame-on)!important;border:0!important;box-shadow:none!important;cursor:pointer;
 opacity:1!important;visibility:visible!important;pointer-events:auto!important;transition:background .25s cubic-bezier(.16,1,.3,1)}
html.has-frame body .site-header .colour-toggle:not(#_u):not(#_v):hover{background:color-mix(in srgb,var(--frame-on) 16%,transparent)!important}
html.has-frame body .site-header .colour-toggle:not(#_u):not(#_v) svg{width:18px;height:18px;color:var(--frame-on)!important}
html.has-frame body .site-header .colour-toggle:not(#_u):not(#_v) circle{fill:none;stroke:currentColor;stroke-width:1.4;transition:fill .3s cubic-bezier(.16,1,.3,1)}
html.has-frame[data-colour=on] body .site-header .colour-toggle:not(#_u):not(#_v) circle{fill:currentColor}
html.has-frame body .site-header .colour-toggle:not(#_u):not(#_v):focus-visible{outline:2px solid var(--frame-on);outline-offset:2px}
html.has-frame body .site-header .sound-toggle:not(#_u):not(#_v){right:calc(var(--frame) + var(--frame-pad) + 2*(var(--frame-ctl) + var(--frame-gap)))!important}
html.has-frame body .site-header .os-toggle:not(#_u):not(#_v){right:calc(var(--frame) + var(--frame-pad) + 3*(var(--frame-ctl) + var(--frame-gap)))!important}
/* a page without the sound (the 404): the OS entry takes the sound's place; it stood one place left of the tab, which
   the frame draws for the controls it finds (js/site-frame.js), on the picture (devices, 22 Oct) */
html.has-frame body .site-header:not(:has(.sound-toggle)) .os-toggle:not(#_u):not(#_v){right:calc(var(--frame) + var(--frame-pad) + 2*(var(--frame-ctl) + var(--frame-gap)))!important}

/* Colour dots (20 Oct; owner: «цветная и ч/б… цвет на наши сцены, именно на точки»): with html[data-colour=on] the
   pictures outside WebGL print through the colour twins of their filters (js/one-bit.js, the -c ids): a dot takes the
   picture's own colour, the ground stays the theme's. The live world does the same in js/3d/glass-post.js (dotColour).
   The type ribbon stays black and white: it is type, not a scene. */
html.one-bit[data-colour=on]:not([data-theme=dark]) :is(.room-world .room-still img,html.airy .airy-still img,.design-principles canvas,.scene-art canvas,.scene-fallback img,.hero-poster,.head-poster,.head-fallback img,.loader-sculpture img){filter:url(#one-bit-day-c)!important}
html.one-bit[data-colour=on][data-theme=dark] :is(.room-world .room-still img,html.airy .airy-still img,.design-principles canvas,.scene-art canvas,.scene-fallback img,.hero-poster,.head-poster,.head-fallback img,.loader-sculpture img){filter:url(#one-bit-night-c)!important}
html.one-bit[data-colour=on]:not([data-theme=dark]) canvas.kit-canvas{filter:url(#one-bit-day-object-c)!important}
html.one-bit[data-colour=on][data-theme=dark] canvas.kit-canvas{filter:url(#one-bit-night-object-c)!important}
html.one-bit[data-colour=on]:not([data-theme=dark]) :is(canvas.cycle-canvas,canvas.principles-canvas,canvas.service-morph-canvas){filter:url(#one-bit-alpha-fine-ink-c)!important}
html.one-bit[data-colour=on][data-theme=dark] :is(canvas.cycle-canvas,canvas.principles-canvas,canvas.service-morph-canvas){filter:url(#one-bit-alpha-fine-c)!important}
html.one-bit[data-colour=on]:not([data-theme=dark]):is(.space-on,.airy) .industry-panel .industry-form>:is(img,canvas){filter:url(#one-bit-alpha-fine-ink-c)!important}   /* the theme in the selector, as above: it outranks `.design-principles canvas` in the colour twins (21 Oct) */
html.one-bit[data-colour=on][data-theme=dark]:is(.space-on,.airy) .industry-panel .industry-form>:is(img,canvas){filter:url(#one-bit-alpha-fine-c)!important}
html.one-bit[data-colour=on]:not([data-theme=dark]):is(.space-on) .service-rows .service-morph .service-morph-poster:not([hidden]){filter:url(#one-bit-alpha-fine-ink-c)!important}
@media (max-width:700px){html.one-bit[data-colour=on][data-theme=dark]:is(.space-on) .service-rows .service-morph .service-morph-poster:not([hidden]){filter:url(#one-bit-alpha-fine-c)!important}}
/* -73 (QA-73 row 17): on the airy path (no WebGL) the tube is its poster at every width; it showed in its smooth lavender
   there, since the print above is scoped to the live world. The same print: fine ink dots by day, fine paper dots by night */
html.one-bit.airy:not([data-theme=dark]) .service-rows .service-morph .service-morph-poster:not([hidden]){filter:url(#one-bit-alpha-fine-ink)!important}
html.one-bit.airy[data-theme=dark] .service-rows .service-morph .service-morph-poster:not([hidden]){filter:url(#one-bit-alpha-fine)!important}
html.one-bit.airy[data-colour=on]:not([data-theme=dark]) .service-rows .service-morph .service-morph-poster:not([hidden]){filter:url(#one-bit-alpha-fine-ink-c)!important}
html.one-bit.airy[data-colour=on][data-theme=dark] .service-rows .service-morph .service-morph-poster:not([hidden]){filter:url(#one-bit-alpha-fine-c)!important}

/* The open menu on phones as a typographic list (20 Oct; the SOTD menus in the owner's library: fromanother-love's «Home /
   Work / Lab / Jobs», glitch-grid's «Work / Info / Contact us», off-menu's card): the links in the display face at L, one
   under another, the socials small; the sheet takes the frame's width, so the list reads as the page's own type. */
@media (max-width:700px){
 /* the sheet is as wide as the tab can grow between the window's bottom corners (js/site-frame.js: the frame's side, a
    window corner and the tab's own S on each side); the buttons keep the closed tab's 6 px rim, so they do not move as
    it opens, and the list hangs 14 px further in. The page's copy steps out while the list is open: nothing of it
    peeks past the sheet's sides (20 Oct: the hero's letters showed in a strip left of the sheet) */
 html.has-frame body .site-header:has(.glass-nav.menu-open):not(#_u):not(#_v){width:calc(100vw - 2*(var(--frame) + var(--frame-r) + var(--frame-rb) + var(--frame-pad)))!important;max-width:calc(100vw - 2*(var(--frame) + var(--frame-r) + var(--frame-rb) + var(--frame-pad)))!important}
 html.has-frame body .site-header .glass-nav.menu-open:not(#_u):not(#_v){padding:18px 2px 2px!important}
 html.has-frame body .site-header .glass-nav.menu-open:not(#_u):not(#_v) .nav-links{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:2px!important;padding:6px 0 18px 14px!important}
 html.has-frame:not(.pt-leaving):not(.pt-arriving):not(.pt-revealing):not(.bw-leaving):not(.bw-held) body>:is(main,footer){transition:opacity .35s cubic-bezier(.16,1,.3,1)}
 html.has-frame:has(.site-header .glass-nav.menu-open) body>:is(main,footer){opacity:0!important;pointer-events:none!important}
 html.has-frame body .site-header .glass-nav.menu-open:not(#_u):not(#_v) .nav-links>a{font-family:var(--t-display,'Archivo Lens',Arial,sans-serif)!important;font-variation-settings:normal!important;font-synthesis:none;
  font-size:var(--t-l,44px)!important;line-height:1!important;letter-spacing:var(--t-track-l,-.012em)!important;padding:4px 0!important}
 html.has-frame body .site-header .glass-nav.menu-open:not(#_u):not(#_v) .nav-socials>a{font-size:var(--t-small,13px)!important}
}

/* Tablets and narrow windows, 701-1000 px (20 Oct): the navigation's tab, centred on the page, ran into the controls' tab,
   so js/site-frame.js left it undrawn and the white links stood unseen on the white window («Let's talk» half under the
   OS icon at 768). Here the frame's controls take the phone's 36 px (the corner stays concentric: 18 + 6 = 24), the
   links tighten, and the header spans only the room between the brand's tab and the controls' tab (each with its S and
   its rim), so the pill, and the tab drawn round it, centre in that room. */
@media (min-width:701px) and (max-width:1000px){
 :root{--frame-ctl:36px;--frame-r:24px;--frame-rb:24px}
 html.has-frame body .site-header:not(#_u):not(#_v){left:calc(var(--frame) + var(--frame-ctl) + 3*var(--frame-pad) + 2*var(--frame-r))!important;
  right:calc(var(--frame) + 4*var(--frame-ctl) + 3*var(--frame-gap) + 3*var(--frame-pad) + 2*var(--frame-r))!important;width:auto!important;margin:0!important}
 /* one more id-free :not than css/micro-2026.css, which loads later and sets the desktop's 14 px and 14/18 px padding */
 html.has-frame body .site-header .glass-nav:not(#_u):not(#_v):not(#_w):not(#_x) .nav-links a{padding:0 clamp(8px,1.2vw,12px)!important;font-size:13px!important}
 html.has-frame body .site-header .glass-nav:not(#_u):not(#_v):not(#_w):not(#_x) .nav-contact{padding:0 clamp(12px,1.6vw,16px)!important;font-size:13px!important}
}
/* the About head develops out of the paper (21 Oct; js/3d/glass-head.js develop): in the 1-bit site its old photographic
   poster never shows first (it flashed a pale photo, then a blank, then the print); it stays the fallback without WebGL */
html.one-bit .about-head-art:not([data-context=unavailable]) .head-fallback{visibility:hidden!important}

/* The font switch (21 Oct; js/portfolio-theme.js, shown in a design branch or after ?fonts=1): the leftmost control in the
   controls' tab, «Aa» in the frame's colours; a press shows the face's name in a pill under the tab for 1.4 s */
html.has-frame body .site-header .font-toggle:not(#_u):not(#_v){position:fixed!important;z-index:51!important;top:calc(var(--frame) + var(--frame-pad))!important;bottom:auto!important;left:auto!important;
 right:calc(var(--frame) + var(--frame-pad) + 4*(var(--frame-ctl) + var(--frame-gap)))!important;width:var(--frame-ctl)!important;height:var(--frame-ctl)!important;margin:0!important;padding:0!important;
 display:grid!important;place-items:center;border-radius:50%;background:transparent!important;color:var(--frame-on)!important;border:0!important;box-shadow:none!important;cursor:pointer;
 font:400 15px/1 Basel,Arial,sans-serif!important;letter-spacing:0!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;transition:background .25s cubic-bezier(.16,1,.3,1)}
html.has-frame body .site-header .font-toggle:not(#_u):not(#_v):hover{background:color-mix(in srgb,var(--frame-on) 16%,transparent)!important}
html.has-frame body .site-header .font-toggle:not(#_u):not(#_v):focus-visible{outline:2px solid var(--frame-on);outline-offset:2px}
html.has-frame body .site-header .font-name:not(#_u):not(#_v){position:fixed;z-index:52;top:calc(var(--frame) + 2*var(--frame-pad) + var(--frame-ctl) + 10px);right:calc(var(--frame) + var(--frame-pad));
 padding:8px 12px;border-radius:999px;background:var(--frame-ink);color:var(--frame-on);font:400 13px/1 Basel,Arial,sans-serif;opacity:0;transform:translateY(-4px);pointer-events:none;
 transition:opacity .25s cubic-bezier(.16,1,.3,1),transform .25s cubic-bezier(.16,1,.3,1)}
html.has-frame body .site-header .font-name.is-on:not(#_u):not(#_v){opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.has-frame body .site-header .font-name:not(#_u):not(#_v){transition:none}}

/* «And the rest.» as an index (21 Oct; js/rest-index.js, ideas.md §3): one tile of the print, 8 x 8 cells in the Bayer
   order; 42 cells are the rest of /work's covers, 22 keep the print's cool grey dot. The cells come up in rank order as
   the panel arrives (the dot, then the cover 180 ms later, each a cut), 14 ms apart; under the hand a cell lifts and the
   others step back (250 ms in, 500 back), and the name stands under the tile */
html:is(.space-on,.airy) #years .year-outro:not(#_u){position:relative}
/* -73: the tile larger, cells of about 70 px at 1440 (the m1 motion report h11: «a thumbnail wall»; was min(38vw,58svh,520px)) */
.rest-wrap{position:absolute;right:max(4vw,40px);top:50%;transform:translateY(-50%);width:min(44vw,66svh,600px);display:grid;gap:14px}
.rest-index{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;aspect-ratio:1}
/* -73 (24 Oct; m2 h11): the loupe looks into the tile through the tile's own square (js/rest-index.js); a lifted cell or a
   focus ring at the edge keeps its few pixels past it */
.rest-lens{overflow:clip;overflow-clip-margin:8px}
/* the hold of «And the rest.» 3.2 steps (was 1.54, about a screen; css/route-pass.css): the develop's .6 of a screen, then the
   loupe's run of about 1.3 screens */
html body[data-page=home] .years-chapter:not(.is-static):not(.is-strip):not(#_r):not(#_s):not(#_t){--route-hold:3.2}
.rest-cell{position:relative;display:block;border-radius:6px;overflow:hidden;clip-path:inset(50%);transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .25s cubic-bezier(.16,1,.3,1)}
.rest-cell::before{content:'';position:absolute;inset:36%;border-radius:2px;background:#9ea1a7}
/* the 22 cells past the work keep only a print dot, 6 px: at the covers' size their square read as a missing picture (tester B09, 21 Oct) */
.rest-cell:not(.has-cover)::before{inset:calc(50% - 3px);border-radius:1px}
.rest-cell.has-cover::after{content:'';position:absolute;inset:0;background-color:#eef1f7;background-image:var(--atlas,none);background-repeat:no-repeat;
 background-size:calc(var(--acols)*100%) calc(var(--arows)*100%);background-position:calc(var(--ax)/(var(--acols) - 1)*100%) calc(var(--ay)/(var(--arows) - 1)*100%);clip-path:inset(50%)}
html[data-theme=dark] .rest-cell::before{background:#4a4d53}
html[data-theme=dark] .rest-cell.has-cover::after{background-color:#181b21}
@keyframes rest-in{from{clip-path:inset(50%)}to{clip-path:inset(0)}}
.rest-index.is-in .rest-cell{animation:rest-in 1ms steps(1) calc(var(--r)*14ms) both}
.rest-index.is-in .rest-cell.has-cover::after{animation:rest-in 1ms steps(1) calc(var(--r)*14ms + 180ms) both}
.rest-index.is-still .rest-cell,.rest-index.is-still .rest-cell.has-cover::after,.years-chapter.is-static .rest-cell,.years-chapter.is-static .rest-cell.has-cover::after{clip-path:inset(0)}
.rest-index.is-hovering .rest-cell:not(.is-on){opacity:.35;transition-duration:.25s}
.rest-cell.is-on{z-index:2;transform:scale(1.12)}
.rest-cell:focus-visible{outline:2px solid var(--ink,#000);outline-offset:2px;z-index:3}
.rest-index-name{margin:0;font-size:15px;line-height:1.3;color:var(--ink,#000);min-height:1.3em}
@media (max-width:1100px){.rest-wrap{width:min(42vw,420px);right:28px}}
@media (max-width:700px){
 .rest-wrap{position:relative;right:auto;top:auto;transform:none;width:100%;max-width:360px;margin-top:28px}
 .rest-index{gap:3px}.rest-cell{border-radius:4px}
}
@media (prefers-reduced-motion:reduce){.rest-index .rest-cell,.rest-index .rest-cell.has-cover::after{animation:none!important;clip-path:inset(0)}.rest-cell{transition:none}}

/* The finale holds (21 Oct; critique.md fix 7: «the closing line never gets a composed frame… slides under the nav tab»):
   on wider screens «Let's make complex feel clear.» and «Let's talk» stay in one frame, 96 px under the tab, while the
   world rises to the dawn and the drop settles behind them; the footer's stretch is a little longer (130 svh), then the
   links and the wordmark come up. The pill keeps its own place beside the line (--fin-gap, js/portfolio-craft.js) */
@media (min-width:701px){
 html:is(.space-on,.airy,.room-live) body #footer .footer-top:not(#_u){min-height:max(130svh,820px)!important;padding-bottom:max(36svh,280px)!important}   /* the held line is released above the frame before the page ends (it rested under the tab) */
 /* (22 Oct, review R07: on the home by day the dawn behind the held line prints nothing, so its lower half stood as
    blank paper for 270 px; a lower dawn lift, ?dwl=-.15 and -.3, printed only the drop) the home's stretch is 100svh:
    the links and the wordmark come up from the moment the line holds, it still holds about 280 px over them and is
    released above the frame before the page ends (the padding is unchanged); by night its dawn holds 270 px less too.
    The inner pages keep 130svh */
 html:is(.space-on,.airy,.room-live) body[data-page=home] #footer .footer-top:not(#_u){min-height:max(100svh,820px)!important}
 html:is(.space-on,.airy,.room-live) body #footer .footer-top>h2:not(#_u){position:sticky!important;top:calc(var(--frame,8px) + 96px)!important;align-self:start;z-index:2}
 html:is(.space-on,.airy,.room-live) body #footer .footer-top>.footer-contact:not(#_u){position:sticky!important;top:calc(var(--frame,8px) + 96px + var(--fin-gap,200px))!important;align-self:start;z-index:2}
}
/* the airy hero by day (tester B03, 21 Oct): its still was rendered from the night orbit, so the black headline vanished
   on it; by day the live world prints the orbit in negative (glass-post.js ditherInvert), and now the still does too */
html.one-bit.airy:not([data-theme=dark]):not([data-colour=on]) .airy-still[data-still=hero] img:not(#_u){filter:invert(1) url(#one-bit-day)!important}
/* the sea's stills by day (22 Oct, lead; the stills sweep at 390): rendered dark, they printed the sea as dense ink under
   Explore's opener, the end of every case and the home's process, where the live world by day lifts its sea and thins it
   behind the copy (js/3d/space-world.js ditherLift). They print through the lifted day curve (js/one-bit.js), so the
   fallback reads like the world it stands in for */
html.one-bit:not([data-theme=dark]):not([data-colour=on]) :is(.room-world .room-still,html.airy .airy-still):is([data-still=glide],[data-still=station],[data-still=waterline],[data-still=ten],[data-still=torso]) img:not(#_u){filter:url(#one-bit-day-lift)!important}
html.one-bit[data-colour=on]:not([data-theme=dark]) :is(.room-world .room-still,html.airy .airy-still):is([data-still=glide],[data-still=station],[data-still=waterline],[data-still=ten],[data-still=torso]) img:not(#_u){filter:url(#one-bit-day-lift-c)!important}
/* the years' opener stands on the sky above the cloud sea's horizon (21 Oct; the owner: «подложки под текст… как
   облачка»): centred, its lede sat on the dense sea and needed a cleared island; higher, it needs none */
html:is(.space-on,.airy) #years .years-chapter:not(.is-static) .year-intro:not(#_u),html:is(.space-on,.airy) .years-chapter:not(.is-static) .year-intro:not(#_u){justify-content:flex-start;padding-top:clamp(104px,15svh,170px)}

/* phone hit areas (QA S13, S14; lead, 22 Oct): the frame's 36 px controls keep their look and take a 40 x 44 px tap area
   (2 px into each 4 px gap, so neighbours never overlap); «Back to top» gets 44 px of height round its 18 px line, its
   underline drawn in the content box as before; the back label above a case's or the CV's title («All work», «About
   Dmytro»: 15 px on 4 px of padding, 30 px) takes 17 px more above it, into the air under the frame's band, its line and
   the margin under it where they were (the title sits right under it; devices, 22 Oct) */
@media (max-width:700px){
 html.has-frame body .site-header :is(.theme-toggle,.os-toggle,.sound-toggle,.colour-toggle):not(#_u):not(#_v)::after,html.has-frame .frame-brand:not(#_u)::after{content:""!important;position:absolute;inset:-4px -2px;display:block}
 html body .back-top:not(#_u):not(#_v):not(#_w):not(#_x){padding-block:13px!important;margin-block:-13px!important;background-origin:content-box!important;background-clip:content-box!important}
 html body .case-back:not(#_u):not(#_v){padding-top:21px!important;margin-top:-17px!important}
}

/* ---- The contact dialog in the site's own print (22 Oct, review R05). It was the last piece of the glass site: a
   blurred backdrop, a card tinted blue-grey with a blue stripe, a colour portrait, the heading in Basel, hairlines, and
   Webflow's grey answer box. Now paper and ink as on every page, a flat dim behind it, the frame's corner, the heading
   in the display face, the portrait printed like the About head, and the answer a plain line in the form's place. The
   ground is --cool-ground: --paper is still the old blue-grey by day (css/chapters.css), which only the page's own
   background is held against. ---- */
html body .contact-dialog:not(#_u):not(#_v){background:var(--cool-ground,#fff)!important;color:var(--ink)!important;border:1px solid var(--ink)!important;border-radius:var(--frame-r,26px)!important}
html body .contact-dialog:not(#_u):not(#_v)::before{content:none!important}
/* in the window, wherever the page is: the old print's position:relative (portfolio-polish-v54.css, live since -54)
 computes to absolute in the top layer, so the open dialog stood at the document's top. Opened from a scrolled case it
 sat thousands of pixels above the window and only the dim showed; on the home the focus scrolled the page to the top
 (22 Oct, modal.cjs: condomini 1440, y 8443, the box at -8413) */
html body .contact-dialog[open]:not(#_u):not(#_v){position:fixed!important}
html body .contact-dialog:not(#_u):not(#_v)::backdrop{background:rgba(0,0,0,.74)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html body .contact-dialog:not(#_u):not(#_v) h2{font-family:var(--t-display)!important;font-variation-settings:normal!important;font-weight:400!important;font-style:normal!important;font-synthesis:none;
 font-size:clamp(48px,5.4vw,78px)!important;line-height:1!important;letter-spacing:var(--t-track-l,-.012em)!important}
html body .contact-dialog:not(#_u):not(#_v) .contact-heading{border-bottom:0!important;padding-bottom:0!important}
html body .contact-dialog:not(#_u):not(#_v) .dialog-close{border-color:var(--ink)!important;color:var(--ink)!important;background:var(--cool-ground,#fff)!important}
html body .contact-dialog:not(#_u):not(#_v) .dialog-toolbar{position:sticky!important;top:0!important;z-index:4!important;box-sizing:content-box!important;margin-top:-14px!important;padding-top:14px!important;background:var(--cool-ground,#fff)!important}   /* (22 Oct, round 3) on a phone the form scrolls inside the dialog and its close scrolled away with it (devices sweep, D-dialog): the toolbar holds at the top as a band of the ground, so the close stays in reach and the form passes under the band, not under the close */
html body .contact-dialog:not(#_u):not(#_v) .dialog-toolbar::after{content:""!important;position:absolute;left:0;right:0;top:100%;height:16px;background:linear-gradient(var(--cool-ground,#fff),transparent);pointer-events:none}   /* the form fades under the band instead of being cut by it (at rest the fade lies in the toolbar's own margin) */
html body .contact-dialog:not(#_u):not(#_v) .dialog-close:focus-visible{background:var(--ink)!important;color:var(--cool-ground,#fff)!important}
html body .contact-dialog:not(#_u):not(#_v) :is(.contact-direct,.submit-button){background:var(--ink)!important;color:var(--cool-ground,#fff)!important;border:1px solid var(--ink)!important}
html body .contact-dialog:not(#_u):not(#_v) :is(.contact-direct,.submit-button):focus-visible{background:var(--cool-ground,#fff)!important;color:var(--ink)!important}
/* hover only where there is one: a tap left «Send enquiry» inverted on a phone, as if it had become a second button */
@media (hover:hover){html body .contact-dialog:not(#_u):not(#_v) .dialog-close:hover{background:var(--ink)!important;color:var(--cool-ground,#fff)!important}
 html body .contact-dialog:not(#_u):not(#_v) :is(.contact-direct,.submit-button):hover{background:var(--cool-ground,#fff)!important;color:var(--ink)!important}}
html body .contact-dialog:not(#_u):not(#_v) :is(.contact-direct,.submit-button) :is(span,svg){color:inherit!important}
html body .contact-dialog:not(#_u):not(#_v) .contact-types button[aria-pressed=true]{color:var(--ink)!important;border-bottom-color:var(--ink)!important}
html body .contact-dialog:not(#_u):not(#_v) :is(input,textarea){border-bottom-color:var(--muted)!important}
html body .contact-dialog:not(#_u):not(#_v) :is(input,textarea):focus-visible{border-bottom-color:var(--ink)!important}
html body .contact-dialog:not(#_u):not(#_v) :is(button,a,input,textarea):focus-visible{outline:2px solid var(--ink)!important;outline-offset:5px}
/* a field that needs a fix says so under its rule, in ink at the small copy's size (js/forms.js; the browser's bubble
 is off), and its rule takes the ink */
html body .contact-dialog:not(#_u):not(#_v) .field-error{margin:-14px 0 22px!important;font-size:13px!important;line-height:1.4!important;letter-spacing:0!important;color:var(--ink)!important}
html body .contact-dialog:not(#_u):not(#_v) :is(input,textarea)[aria-invalid=true]{border-bottom-color:var(--ink)!important}
html body .contact-dialog:not(#_u):not(#_v) :is(.w-form-done,.w-form-fail){margin:26px 0 0!important;padding:0!important;background:none!important;border:0!important;border-radius:0!important;
 text-align:left!important;color:var(--ink)!important;font-size:var(--t-body,17px)!important;line-height:1.45!important;max-width:30em}
html body .contact-dialog:not(#_u):not(#_v) .w-form-fail a{color:inherit!important;text-decoration:underline!important;text-underline-offset:3px}
html.one-bit:not([data-theme=dark]) body .contact-dialog .contact-portrait img{filter:url(#one-bit-day)!important}
html.one-bit[data-theme=dark] body .contact-dialog .contact-portrait img{filter:url(#one-bit-night)!important}
@media (max-width:700px){html body .contact-dialog:not(#_u):not(#_v) h2{font-size:clamp(44px,12.5vw,60px)!important}}

/* The finale fits the phone (-72, 23 Oct; the visual jury, About and Approach 390-18 and 22: at the page's end «Let's make
   complex products feel clear.» stood at y 17-42, under the 52 px band and the logo's tab). Every inner page's footer
   (932 px) is taller than the screen, so the line was pushed up; 24 px under the pill instead of 10svh lowers it to y 77
   and more. The home (space-on) keeps its own end, where the line has left the frame. */
@media (max-width:700px){html.room-live body #footer .footer-top:not(#_u){padding-bottom:24px!important}}

/* The year's names stand under its cover on a phone (-72, 23 Oct; the visual jury, home 390-5: «a lone, centred
   "Startrack"» 160 px under its card, and 2022's four lines of names ran under the bottom bar). The fan's centre is at
   56 % of the stage and the front card is 50vw wide at the covers' 888 × 1010, so its foot is at 56 % + 28.43vw; the
   turned cards behind it reach about 80 px lower. Every year's names start on one line 96 px under that foot (y 680 at
   390 × 844), under the whole fan, and 2022's four lines end at 757, over the bar. */
@media (max-width:700px){html:is(.space-on,.airy) .years-chapter:not(.is-static) .year-info:not(#_u):not(#_v):not(#_w){top:calc(56% + 28.43vw + 96px);bottom:auto}}
/* …and without the edge sheet: the names now stand on the quiet ground under the fan, and the sheet (from the names' top
   less 18 px to the stage's foot, 182 px) was the jury's «full-width white knockout band» that cut the terrain in two
   whenever the stage was between rest positions. The lanes still clear the print round the words (js/3d/space-lanes.js). */
@media (max-width:700px){html:is(.space-on,.airy) .years-chapter:not(.is-static) .years-stage:not(#_u)::before{display:none}}

/* The hero's line masks keep the descenders (-72, 23 Oct; the visual jury, r1 bug 2: «"j" and "y" in "journeys." are cut
   flat by a line mask»): Instrument Serif's j, y, p go about .24em under the baseline in the .94 line, deeper than the
   mask's .13em (css/portfolio-v36.css). The mask gives them .26em, taken back by the margin, so nothing moves. */
html .hero-copy .hero-phrase>span{padding-bottom:.26em;margin-bottom:-.26em}

/* The home's approach intro on the phone's margin (-72, 23 Oct; the visual jury's seven left edges at 390): the section
   still keeps the 10 px inset of the old panels (css/portfolio-craft.css) and its intro added 22 px inside it, so
   «Good design starts with understanding.» stood at 32. The intro now takes the gutter less the inset: 22. */
@media (max-width:640px){html body .process-story .approach-intro:not(#_u){margin-left:calc(var(--gutter,22px) - 10px);margin-right:calc(var(--gutter,22px) - 10px)}}
/* the same old inset on /approach's design cycle: the section at 10 px with 20 px inside put «Start with people.» and its
   copy at 30 on a phone; the gutter less the inset brings them to 22 */
@media (max-width:640px){html body section.design-cycle:not(#_u){padding-left:calc(var(--gutter,22px) - 10px);padding-right:calc(var(--gutter,22px) - 10px)}}
/* desktop: the same 10 px inset, corrected in css/fix-approach-20261021.css (its 4vw rule outranks one here) */

/* -73: no white plates under copy (the main AD, AD-DIRECTION.md §8.2: «Белые плашки со скруглением… читаются как шаблонные
   карточки. Решение: текст стоит на расчищенной полосе мира, без листов»). Approach's three practice cards and its opening
   note lose their plate, blur and radius (css/portfolio-polish-v54.css); with nothing opaque over the world,
   js/reading-ground.js marks their copy and the world clears its print round the words (js/3d/space-lanes.js). Pills stay:
   they are buttons. */
html body .practice-grid article:not(#_u):not(#_v){background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-radius:0!important;padding-left:0!important;padding-right:0!important}
html body[data-page=approach] main>.page-opening.has-tile-field>p:not(#_u){background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-radius:0!important;padding:0!important}
/* (QA-73 row 29) a phone's /approach lead is a sheet docked in the frame's foot (css/inner-2026.css), its lower 80 px the
   ground the nav's tab sits on; scrolled up, that band ran under the top bar as a blank plate after the words had gone: the
   sheet fades out over the first half of its exit, by the scroll, so it never leaves a bare ground (no timeline: as before).
   Reduced motion too (css/redesign.css stops every animation): a fade held to the scroll moves nothing */
@supports (animation-timeline:view()){@media (max-width:700px){
 html[data-room=approach] body[data-page=approach] main>.page-opening:not(#_u)>p:not(#_v){animation:sheet-leave linear both!important;animation-timeline:view()!important;animation-range:exit 0% exit 50%!important}}
 @keyframes sheet-leave{to{opacity:0}}}
/* -73 (24 Oct; the m2 motion report p01 «the headline's blur pulse», m1 p03 «sharp, blurred, sharp»; the house rule: no blur,
   motion-feel.md §3): every title still rises through its mask, without a blur */
h1.tm-pending .tm-i,h2.tm-pending .tm-i,h3.tm-pending .tm-i,.contact-heading.tm-pending .tm-i,.motion-ready h1[data-reveal].reveal-pending .text-mask>span,
.is-arriving .hero-line .letter-mask>span,.is-arriving .case-cover h1 .letter-mask>span,.loader-word .letter-mask>span,.is-arriving h1[data-reveal] .text-mask>span{filter:none!important}
/* -73 (24 Oct; the m2 motion report h13 at 390: «the labels still collide»): the steps' panels share one grid cell; aligned to
   its end, a panel with a shorter paragraph put its title lower, so the two titles of a swap rolled in two different clip
   boxes; aligned to the start, every title stands in the same box and the drum clips them as one */
.process-scenes>.process-panel{align-self:start!important}

/* -73 (24 Oct; S13, TYPE-COMPOSITION.md devices 3, 2 and 6, after Laguta & Laguta and UPROCK): «And the rest.» as a ruled index
   (js/rest-index.js indexBuild; ?rest=tile keeps the tile above). The names in two columns under hairlines in the grid's right
   seven columns (12 columns, 4vw margins, 2vw gutters: column 6 starts at 43.17vw); the picture pinned under the heading in the
   first four (29.33vw, 16:10), its card's line under it; the rows not under the hand in the second tone. The hold is about two
   screens again (the tile's loupe needed 3.2) */
html body[data-page=home] .years-chapter.has-rest-index:not(.is-static):not(.is-strip):not(#_r):not(#_s):not(#_t):not(#_q){--route-hold:1.8}
.ri-view{display:none;margin:0}
.ri-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:column;grid-template-rows:repeat(var(--rows,22),auto);column-gap:2vw;
 margin:0;padding:0;list-style:none;font-family:var(--t-text);font-size:13px;line-height:1.3}
.ri-row{position:relative;min-width:0}
.ri-row::before,.ri-row.is-foot::after{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);transform-origin:0 50%}
.ri-row.is-foot::after{top:auto;bottom:0}
.ri-link{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:clamp(4px,.8svh,7px) 0;color:var(--ink);text-decoration:none;
 transition:color .25s cubic-bezier(.16,1,.3,1)}
.ri-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ri-year{flex:none;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.ri-list.has-on .ri-row:not(.is-on) .ri-link{color:var(--muted);transition-duration:.25s}
.ri-list.has-on .ri-row.is-on .ri-year{color:var(--ink)}
.ri-link:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* the print, once a visit (js/rest-index.js): the rule draws from the left, the name prints in behind it, 12 ms a row */
.ri-list.is-out .ri-row::before,.ri-list.is-out .ri-row.is-foot::after{transform:scaleX(0)}
.ri-list.is-out .ri-link{visibility:hidden}
.ri-list.is-print .ri-row::before,.ri-list.is-print .ri-row.is-foot::after{animation:ri-rule .42s cubic-bezier(.16,1,.3,1) calc(var(--i)*12ms) both}
.ri-list.is-print .ri-link{animation:ri-type .3s steps(1,end) calc(var(--i)*12ms + 80ms) both}
@keyframes ri-rule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (min-width:701px){
 html body #years .year-outro .ri-view{display:block;width:min(29.33vw,440px);margin:clamp(24px,3.4svh,36px) 0 0}
 html body #years .rest-wrap.is-index:not(#_r){position:absolute;left:43.17vw;right:4vw;top:clamp(112px,16svh,150px);width:auto;max-width:none;transform:none;display:block;gap:0}
 /* (hold14) the title's box runs the chapter's width over the index: it never takes the pointer, the rows under it do */
 html body #years.has-rest-index .year-outro .years-title{pointer-events:none}
 .ri-pic{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r-image,10px);background:var(--paper);
  animation-duration:.38s;animation-timing-function:steps(1,end);animation-fill-mode:both}
 .ri-pic:not([src]){visibility:hidden}
 .ri-what{margin-top:10px;font-family:var(--t-text);font-size:13px;line-height:1.35;color:var(--muted);max-width:32em;min-height:1.35em}
}
/* the static chapter (reduced motion): the index in the page's flow under the picture, three columns */
html body #years.is-static .rest-wrap.is-index:not(#_r):not(#_s){position:relative;left:auto;right:auto;top:auto;margin-top:clamp(28px,4vw,48px)}
html body #years.is-static .ri-list:not(#_r){grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(var(--rows3,15),auto)}
@media (max-width:700px){
 html body #years .rest-wrap.is-index:not(#_r){position:relative;left:auto;right:auto;top:auto;transform:none;width:100%;max-width:none;margin-top:28px;display:block}
 html body #years .ri-list:not(#_r):not(#_s){grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(var(--rows,22),auto);column-gap:16px}
 .ri-year{display:none}
 /* (-73, hold15) the outro is one screen in the phone's pinned pass: the title, the pill and 22 rows overflowed it, and the
    column shrank the pill to its 2 px border (a white bar by night). The pill keeps its size, the title sets on one line, the
    block starts under the frame and the rows step at 24 px (WCAG 2.5.8's minimum target): 766 px of 844, over the bar */
 html body #years .year-outro>.years-more:not(#_r){flex:none}
 html body #years.has-rest-index .year-outro .years-title .ym:not(#_r){display:inline-block}
 html body #years.has-rest-index .year-outro .years-title .ym+.ym:not(#_r){margin-left:.16em!important}   /* type-2026.css sets the masks' margins !important */
 html:is(.space-on,.airy) body[data-page=home] #years.has-rest-index .year-outro:not(#_u):not(#_v){padding-top:clamp(84px,11svh,112px)!important}
 html body #years .ri-link:not(#_r){padding:3.5px 0;line-height:17px}
 html body #years .ri-list:not(#_r):not(#_s):not(#_t){column-gap:12px}
 html body #years .ri-name:not(#_r){letter-spacing:-.01em}   /* hold16: «OBEGRÄNSAD Light Show» was cut at 14 px */
}
/* (-73, hold15) the years' titles never take the pointer: «Year by year.» rides the track to the outro, and its spans lay
   over the index's rows (riprobe: «by year.» took the hover) */
html body #years .years-title,html body #years .years-title *{pointer-events:none}
@media (prefers-reduced-motion:reduce){.ri-list .ri-row::before,.ri-list .ri-row.is-foot::after,.ri-list .ri-link,.ri-pic{animation:none!important;transform:none!important;visibility:visible!important}}
@keyframes ri-type{0.0%{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M0 0h4v4h-4zM16 0h4v4h-4zM8 8h4v4h-4zM24 8h4v4h-4zM0 16h4v4h-4zM16 16h4v4h-4zM8 24h4v4h-4zM24 24h4v4h-4z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M0 0h4v4h-4zM16 0h4v4h-4zM8 8h4v4h-4zM24 8h4v4h-4zM0 16h4v4h-4zM16 16h4v4h-4zM8 24h4v4h-4zM24 24h4v4h-4z'/%3E%3C/svg%3E");-webkit-mask-size:32px 32px;mask-size:32px 32px}12.5%{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M0 0h4v4h-4zM8 0h4v4h-4zM16 0h4v4h-4zM24 0h4v4h-4zM0 8h4v4h-4zM8 8h4v4h-4zM16 8h4v4h-4zM24 8h4v4h-4zM0 16h4v4h-4zM8 16h4v4h-4zM16 16h4v4h-4zM24 16h4v4h-4zM0 24h4v4h-4zM8 24h4v4h-4zM16 24h4v4h-4zM24 24h4v4h-4z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M0 0h4v4h-4zM8 0h4v4h-4zM16 0h4v4h-4zM24 0h4v4h-4zM0 8h4v4h-4zM8 8h4v4h-4zM16 8h4v4h-4zM24 8h4v4h-4zM0 16h4v4h-4zM8 16h4v4h-4zM16 16h4v4h-4zM24 16h4v4h-4zM0 24h4v4h-4zM8 24h4v4h-4zM16 24h4v4h-4zM24 24h4v4h-4z'/%3E%3C/svg%3E");-webkit-mask-size:32px 32px;mask-size:32px 32px}25.0%{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M0 0h4v4h-4zM8 0h4v4h-4zM16 0h4v4h-4zM24 0h4v4h-4zM4 4h4v4h-4zM20 4h4v4h-4zM0 8h4v4h-4zM8 8h4v4h-4zM16 8h4v4h-4zM24 8h4v4h-4zM12 12h4v4h-4zM28 12h4v4h-4zM0 16h4v4h-4zM8 16h4v4h-4zM16 16h4v4h-4zM24 16h4v4h-4zM4 20h4v4h-4zM20 20h4v4h-4zM0 24h4v4h-4zM8 24h4v4h-4zM16 24h4v4h-4zM24 24h4v4h-4zM12 28h4v4h-4zM28 28h4v4h-4z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M0 0h4v4h-4zM8 0h4v4h-4zM16 0h4v4h-4zM24 0h4v4h-4zM4 4h4v4h-4zM20 4h4v4h-4zM0 8h4v4h-4zM8 8h4v4h-4zM16 8h4v4h-4zM24 8h4v4h-4zM12 12h4v4h-4zM28 12h4v4h-4zM0 16h4v4h-4zM8 16h4v4h-4zM16 16h4v4h-4zM24 16h4v4h-4zM4 20h4v4h-4zM20 20h4v4h-4zM0 24h4v4h-4zM8 24h4v4h-4zM16 24h4v4h-4zM24 24h4v4h-4zM12 28h4v4h-4zM28 28h4v4h-4z'/%3E%3C/svg%3E");-webkit-mask-size:32px 32px;mask-size:32px 32px}37.5%{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M0 0h4v4h-4zM8 0h4v4h-4zM16 0h4v4h-4zM24 0h4v4h-4zM4 4h4v4h-4zM12 4h4v4h-4zM20 4h4v4h-4zM28 4h4v4h-4zM0 8h4v4h-4zM8 8h4v4h-4zM16 8h4v4h-4zM24 8h4v4h-4zM4 12h4v4h-4zM12 12h4v4h-4zM20 12h4v4h-4zM28 12h4v4h-4zM0 16h4v4h-4zM8 16h4v4h-4zM16 16h4v4h-4zM24 16h4v4h-4zM4 20h4v4h-4zM12 20h4v4h-4zM20 20h4v4h-4zM28 20h4v4h-4zM0 24h4v4h-4zM8 24h4v4h-4zM16 24h4v4h-4zM24 24h4v4h-4zM4 28h4v4h-4zM12 28h4v4h-4zM20 28h4v4h-4zM28 28h4v4h-4z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M0 0h4v4h-4zM8 0h4v4h-4zM16 0h4v4h-4zM24 0h4v4h-4zM4 4h4v4h-4zM12 4h4v4h-4zM20 4h4v4h-4zM28 4h4v4h-4zM0 8h4v4h-4zM8 8h4v4h-4zM16 8h4v4h-4zM24 8h4v4h-4zM4 12h4v4h-4zM12 12h4v4h-4zM20 12h4v4h-4zM28 12h4v4h-4zM0 16h4v4h-4zM8 16h4v4h-4zM16 16h4v4h-4zM24 16h4v4h-4zM4 20h4v4h-4zM12 20h4v4h-4zM20 20h4v4h-4zM28 20h4v4h-4zM0 24h4v4h-4zM8 24h4v4h-4zM16 24h4v4h-4zM24 24h4v4h-4zM4 28h4v4h-4zM12 28h4v4h-4zM20 28h4v4h-4zM28 28h4v4h-4z'/%3E%3C/svg%3E");-webkit-mask-size:32px 32px;mask-size:32px 32px}50.0%{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M0 0h4v4h-4zM4 0h4v4h-4zM8 0h4v4h-4zM16 0h4v4h-4zM20 0h4v4h-4zM24 0h4v4h-4zM4 4h4v4h-4zM12 4h4v4h-4zM20 4h4v4h-4zM28 4h4v4h-4zM0 8h4v4h-4zM8 8h4v4h-4zM12 8h4v4h-4zM16 8h4v4h-4zM24 8h4v4h-4zM28 8h4v4h-4zM4 12h4v4h-4zM12 12h4v4h-4zM20 12h4v4h-4zM28 12h4v4h-4zM0 16h4v4h-4zM4 16h4v4h-4zM8 16h4v4h-4zM16 16h4v4h-4zM20 16h4v4h-4zM24 16h4v4h-4zM4 20h4v4h-4zM12 20h4v4h-4zM20 20h4v4h-4zM28 20h4v4h-4zM0 24h4v4h-4zM8 24h4v4h-4zM12 24h4v4h-4zM16 24h4v4h-4zM24 24h4v4h-4zM28 24h4v4h-4zM4 28h4v4h-4zM12 28h4v4h-4zM20 28h4v4h-4zM28 28h4v4h-4z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M0 0h4v4h-4zM4 0h4v4h-4zM8 0h4v4h-4zM16 0h4v4h-4zM20 0h4v4h-4zM24 0h4v4h-4zM4 4h4v4h-4zM12 4h4v4h-4zM20 4h4v4h-4zM28 4h4v4h-4zM0 8h4v4h-4zM8 8h4v4h-4zM12 8h4v4h-4zM16 8h4v4h-4zM24 8h4v4h-4zM28 8h4v4h-4zM4 12h4v4h-4zM12 12h4v4h-4zM20 12h4v4h-4zM28 12h4v4h-4zM0 16h4v4h-4zM4 16h4v4h-4zM8 16h4v4h-4zM16 16h4v4h-4zM20 16h4v4h-4zM24 16h4v4h-4zM4 20h4v4h-4zM12 20h4v4h-4zM20 20h4v4h-4zM28 20h4v4h-4zM0 24h4v4h-4zM8 24h4v4h-4zM12 24h4v4h-4zM16 24h4v4h-4zM24 24h4v4h-4zM28 24h4v4h-4zM4 28h4v4h-4zM12 28h4v4h-4zM20 28h4v4h-4zM28 28h4v4h-4z'/%3E%3C/svg%3E");-webkit-mask-size:32px 32px;mask-size:32px 32px}62.5%{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M0 0h4v4h-4zM4 0h4v4h-4zM8 0h4v4h-4zM12 0h4v4h-4zM16 0h4v4h-4zM20 0h4v4h-4zM24 0h4v4h-4zM28 0h4v4h-4zM4 4h4v4h-4zM12 4h4v4h-4zM20 4h4v4h-4zM28 4h4v4h-4zM0 8h4v4h-4zM4 8h4v4h-4zM8 8h4v4h-4zM12 8h4v4h-4zM16 8h4v4h-4zM20 8h4v4h-4zM24 8h4v4h-4zM28 8h4v4h-4zM4 12h4v4h-4zM12 12h4v4h-4zM20 12h4v4h-4zM28 12h4v4h-4zM0 16h4v4h-4zM4 16h4v4h-4zM8 16h4v4h-4zM12 16h4v4h-4zM16 16h4v4h-4zM20 16h4v4h-4zM24 16h4v4h-4zM28 16h4v4h-4zM4 20h4v4h-4zM12 20h4v4h-4zM20 20h4v4h-4zM28 20h4v4h-4zM0 24h4v4h-4zM4 24h4v4h-4zM8 24h4v4h-4zM12 24h4v4h-4zM16 24h4v4h-4zM20 24h4v4h-4zM24 24h4v4h-4zM28 24h4v4h-4zM4 28h4v4h-4zM12 28h4v4h-4zM20 28h4v4h-4zM28 28h4v4h-4z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M0 0h4v4h-4zM4 0h4v4h-4zM8 0h4v4h-4zM12 0h4v4h-4zM16 0h4v4h-4zM20 0h4v4h-4zM24 0h4v4h-4zM28 0h4v4h-4zM4 4h4v4h-4zM12 4h4v4h-4zM20 4h4v4h-4zM28 4h4v4h-4zM0 8h4v4h-4zM4 8h4v4h-4zM8 8h4v4h-4zM12 8h4v4h-4zM16 8h4v4h-4zM20 8h4v4h-4zM24 8h4v4h-4zM28 8h4v4h-4zM4 12h4v4h-4zM12 12h4v4h-4zM20 12h4v4h-4zM28 12h4v4h-4zM0 16h4v4h-4zM4 16h4v4h-4zM8 16h4v4h-4zM12 16h4v4h-4zM16 16h4v4h-4zM20 16h4v4h-4zM24 16h4v4h-4zM28 16h4v4h-4zM4 20h4v4h-4zM12 20h4v4h-4zM20 20h4v4h-4zM28 20h4v4h-4zM0 24h4v4h-4zM4 24h4v4h-4zM8 24h4v4h-4zM12 24h4v4h-4zM16 24h4v4h-4zM20 24h4v4h-4zM24 24h4v4h-4zM28 24h4v4h-4zM4 28h4v4h-4zM12 28h4v4h-4zM20 28h4v4h-4zM28 28h4v4h-4z'/%3E%3C/svg%3E");-webkit-mask-size:32px 32px;mask-size:32px 32px}75.0%{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M0 0h4v4h-4zM4 0h4v4h-4zM8 0h4v4h-4zM12 0h4v4h-4zM16 0h4v4h-4zM20 0h4v4h-4zM24 0h4v4h-4zM28 0h4v4h-4zM0 4h4v4h-4zM4 4h4v4h-4zM12 4h4v4h-4zM16 4h4v4h-4zM20 4h4v4h-4zM28 4h4v4h-4zM0 8h4v4h-4zM4 8h4v4h-4zM8 8h4v4h-4zM12 8h4v4h-4zM16 8h4v4h-4zM20 8h4v4h-4zM24 8h4v4h-4zM28 8h4v4h-4zM4 12h4v4h-4zM8 12h4v4h-4zM12 12h4v4h-4zM20 12h4v4h-4zM24 12h4v4h-4zM28 12h4v4h-4zM0 16h4v4h-4zM4 16h4v4h-4zM8 16h4v4h-4zM12 16h4v4h-4zM16 16h4v4h-4zM20 16h4v4h-4zM24 16h4v4h-4zM28 16h4v4h-4zM0 20h4v4h-4zM4 20h4v4h-4zM12 20h4v4h-4zM16 20h4v4h-4zM20 20h4v4h-4zM28 20h4v4h-4zM0 24h4v4h-4zM4 24h4v4h-4zM8 24h4v4h-4zM12 24h4v4h-4zM16 24h4v4h-4zM20 24h4v4h-4zM24 24h4v4h-4zM28 24h4v4h-4zM4 28h4v4h-4zM8 28h4v4h-4zM12 28h4v4h-4zM20 28h4v4h-4zM24 28h4v4h-4zM28 28h4v4h-4z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M0 0h4v4h-4zM4 0h4v4h-4zM8 0h4v4h-4zM12 0h4v4h-4zM16 0h4v4h-4zM20 0h4v4h-4zM24 0h4v4h-4zM28 0h4v4h-4zM0 4h4v4h-4zM4 4h4v4h-4zM12 4h4v4h-4zM16 4h4v4h-4zM20 4h4v4h-4zM28 4h4v4h-4zM0 8h4v4h-4zM4 8h4v4h-4zM8 8h4v4h-4zM12 8h4v4h-4zM16 8h4v4h-4zM20 8h4v4h-4zM24 8h4v4h-4zM28 8h4v4h-4zM4 12h4v4h-4zM8 12h4v4h-4zM12 12h4v4h-4zM20 12h4v4h-4zM24 12h4v4h-4zM28 12h4v4h-4zM0 16h4v4h-4zM4 16h4v4h-4zM8 16h4v4h-4zM12 16h4v4h-4zM16 16h4v4h-4zM20 16h4v4h-4zM24 16h4v4h-4zM28 16h4v4h-4zM0 20h4v4h-4zM4 20h4v4h-4zM12 20h4v4h-4zM16 20h4v4h-4zM20 20h4v4h-4zM28 20h4v4h-4zM0 24h4v4h-4zM4 24h4v4h-4zM8 24h4v4h-4zM12 24h4v4h-4zM16 24h4v4h-4zM20 24h4v4h-4zM24 24h4v4h-4zM28 24h4v4h-4zM4 28h4v4h-4zM8 28h4v4h-4zM12 28h4v4h-4zM20 28h4v4h-4zM24 28h4v4h-4zM28 28h4v4h-4z'/%3E%3C/svg%3E");-webkit-mask-size:32px 32px;mask-size:32px 32px}87.5%{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M0 0h4v4h-4zM4 0h4v4h-4zM8 0h4v4h-4zM12 0h4v4h-4zM16 0h4v4h-4zM20 0h4v4h-4zM24 0h4v4h-4zM28 0h4v4h-4zM0 4h4v4h-4zM4 4h4v4h-4zM8 4h4v4h-4zM12 4h4v4h-4zM16 4h4v4h-4zM20 4h4v4h-4zM24 4h4v4h-4zM28 4h4v4h-4zM0 8h4v4h-4zM4 8h4v4h-4zM8 8h4v4h-4zM12 8h4v4h-4zM16 8h4v4h-4zM20 8h4v4h-4zM24 8h4v4h-4zM28 8h4v4h-4zM0 12h4v4h-4zM4 12h4v4h-4zM8 12h4v4h-4zM12 12h4v4h-4zM16 12h4v4h-4zM20 12h4v4h-4zM24 12h4v4h-4zM28 12h4v4h-4zM0 16h4v4h-4zM4 16h4v4h-4zM8 16h4v4h-4zM12 16h4v4h-4zM16 16h4v4h-4zM20 16h4v4h-4zM24 16h4v4h-4zM28 16h4v4h-4zM0 20h4v4h-4zM4 20h4v4h-4zM8 20h4v4h-4zM12 20h4v4h-4zM16 20h4v4h-4zM20 20h4v4h-4zM24 20h4v4h-4zM28 20h4v4h-4zM0 24h4v4h-4zM4 24h4v4h-4zM8 24h4v4h-4zM12 24h4v4h-4zM16 24h4v4h-4zM20 24h4v4h-4zM24 24h4v4h-4zM28 24h4v4h-4zM0 28h4v4h-4zM4 28h4v4h-4zM8 28h4v4h-4zM12 28h4v4h-4zM16 28h4v4h-4zM20 28h4v4h-4zM24 28h4v4h-4zM28 28h4v4h-4z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M0 0h4v4h-4zM4 0h4v4h-4zM8 0h4v4h-4zM12 0h4v4h-4zM16 0h4v4h-4zM20 0h4v4h-4zM24 0h4v4h-4zM28 0h4v4h-4zM0 4h4v4h-4zM4 4h4v4h-4zM8 4h4v4h-4zM12 4h4v4h-4zM16 4h4v4h-4zM20 4h4v4h-4zM24 4h4v4h-4zM28 4h4v4h-4zM0 8h4v4h-4zM4 8h4v4h-4zM8 8h4v4h-4zM12 8h4v4h-4zM16 8h4v4h-4zM20 8h4v4h-4zM24 8h4v4h-4zM28 8h4v4h-4zM0 12h4v4h-4zM4 12h4v4h-4zM8 12h4v4h-4zM12 12h4v4h-4zM16 12h4v4h-4zM20 12h4v4h-4zM24 12h4v4h-4zM28 12h4v4h-4zM0 16h4v4h-4zM4 16h4v4h-4zM8 16h4v4h-4zM12 16h4v4h-4zM16 16h4v4h-4zM20 16h4v4h-4zM24 16h4v4h-4zM28 16h4v4h-4zM0 20h4v4h-4zM4 20h4v4h-4zM8 20h4v4h-4zM12 20h4v4h-4zM16 20h4v4h-4zM20 20h4v4h-4zM24 20h4v4h-4zM28 20h4v4h-4zM0 24h4v4h-4zM4 24h4v4h-4zM8 24h4v4h-4zM12 24h4v4h-4zM16 24h4v4h-4zM20 24h4v4h-4zM24 24h4v4h-4zM28 24h4v4h-4zM0 28h4v4h-4zM4 28h4v4h-4zM8 28h4v4h-4zM12 28h4v4h-4zM16 28h4v4h-4zM20 28h4v4h-4zM24 28h4v4h-4zM28 28h4v4h-4z'/%3E%3C/svg%3E");-webkit-mask-size:32px 32px;mask-size:32px 32px}100%{-webkit-mask-image:none;mask-image:none}}
@keyframes ri-print-a{0.0%{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM32 0h8v8h-8zM16 16h8v8h-8zM48 16h8v8h-8zM0 32h8v8h-8zM32 32h8v8h-8zM16 48h8v8h-8zM48 48h8v8h-8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM32 0h8v8h-8zM16 16h8v8h-8zM48 16h8v8h-8zM0 32h8v8h-8zM32 32h8v8h-8zM16 48h8v8h-8zM48 48h8v8h-8z'/%3E%3C/svg%3E");-webkit-mask-size:64px 64px;mask-size:64px 64px}12.5%{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM16 0h8v8h-8zM32 0h8v8h-8zM48 0h8v8h-8zM0 16h8v8h-8zM16 16h8v8h-8zM32 16h8v8h-8zM48 16h8v8h-8zM0 32h8v8h-8zM16 32h8v8h-8zM32 32h8v8h-8zM48 32h8v8h-8zM0 48h8v8h-8zM16 48h8v8h-8zM32 48h8v8h-8zM48 48h8v8h-8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM16 0h8v8h-8zM32 0h8v8h-8zM48 0h8v8h-8zM0 16h8v8h-8zM16 16h8v8h-8zM32 16h8v8h-8zM48 16h8v8h-8zM0 32h8v8h-8zM16 32h8v8h-8zM32 32h8v8h-8zM48 32h8v8h-8zM0 48h8v8h-8zM16 48h8v8h-8zM32 48h8v8h-8zM48 48h8v8h-8z'/%3E%3C/svg%3E");-webkit-mask-size:64px 64px;mask-size:64px 64px}25.0%{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM16 0h8v8h-8zM32 0h8v8h-8zM48 0h8v8h-8zM8 8h8v8h-8zM40 8h8v8h-8zM0 16h8v8h-8zM16 16h8v8h-8zM32 16h8v8h-8zM48 16h8v8h-8zM24 24h8v8h-8zM56 24h8v8h-8zM0 32h8v8h-8zM16 32h8v8h-8zM32 32h8v8h-8zM48 32h8v8h-8zM8 40h8v8h-8zM40 40h8v8h-8zM0 48h8v8h-8zM16 48h8v8h-8zM32 48h8v8h-8zM48 48h8v8h-8zM24 56h8v8h-8zM56 56h8v8h-8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM16 0h8v8h-8zM32 0h8v8h-8zM48 0h8v8h-8zM8 8h8v8h-8zM40 8h8v8h-8zM0 16h8v8h-8zM16 16h8v8h-8zM32 16h8v8h-8zM48 16h8v8h-8zM24 24h8v8h-8zM56 24h8v8h-8zM0 32h8v8h-8zM16 32h8v8h-8zM32 32h8v8h-8zM48 32h8v8h-8zM8 40h8v8h-8zM40 40h8v8h-8zM0 48h8v8h-8zM16 48h8v8h-8zM32 48h8v8h-8zM48 48h8v8h-8zM24 56h8v8h-8zM56 56h8v8h-8z'/%3E%3C/svg%3E");-webkit-mask-size:64px 64px;mask-size:64px 64px}37.5%{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM16 0h8v8h-8zM32 0h8v8h-8zM48 0h8v8h-8zM8 8h8v8h-8zM24 8h8v8h-8zM40 8h8v8h-8zM56 8h8v8h-8zM0 16h8v8h-8zM16 16h8v8h-8zM32 16h8v8h-8zM48 16h8v8h-8zM8 24h8v8h-8zM24 24h8v8h-8zM40 24h8v8h-8zM56 24h8v8h-8zM0 32h8v8h-8zM16 32h8v8h-8zM32 32h8v8h-8zM48 32h8v8h-8zM8 40h8v8h-8zM24 40h8v8h-8zM40 40h8v8h-8zM56 40h8v8h-8zM0 48h8v8h-8zM16 48h8v8h-8zM32 48h8v8h-8zM48 48h8v8h-8zM8 56h8v8h-8zM24 56h8v8h-8zM40 56h8v8h-8zM56 56h8v8h-8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM16 0h8v8h-8zM32 0h8v8h-8zM48 0h8v8h-8zM8 8h8v8h-8zM24 8h8v8h-8zM40 8h8v8h-8zM56 8h8v8h-8zM0 16h8v8h-8zM16 16h8v8h-8zM32 16h8v8h-8zM48 16h8v8h-8zM8 24h8v8h-8zM24 24h8v8h-8zM40 24h8v8h-8zM56 24h8v8h-8zM0 32h8v8h-8zM16 32h8v8h-8zM32 32h8v8h-8zM48 32h8v8h-8zM8 40h8v8h-8zM24 40h8v8h-8zM40 40h8v8h-8zM56 40h8v8h-8zM0 48h8v8h-8zM16 48h8v8h-8zM32 48h8v8h-8zM48 48h8v8h-8zM8 56h8v8h-8zM24 56h8v8h-8zM40 56h8v8h-8zM56 56h8v8h-8z'/%3E%3C/svg%3E");-webkit-mask-size:64px 64px;mask-size:64px 64px}50.0%{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM8 0h8v8h-8zM16 0h8v8h-8zM32 0h8v8h-8zM40 0h8v8h-8zM48 0h8v8h-8zM8 8h8v8h-8zM24 8h8v8h-8zM40 8h8v8h-8zM56 8h8v8h-8zM0 16h8v8h-8zM16 16h8v8h-8zM24 16h8v8h-8zM32 16h8v8h-8zM48 16h8v8h-8zM56 16h8v8h-8zM8 24h8v8h-8zM24 24h8v8h-8zM40 24h8v8h-8zM56 24h8v8h-8zM0 32h8v8h-8zM8 32h8v8h-8zM16 32h8v8h-8zM32 32h8v8h-8zM40 32h8v8h-8zM48 32h8v8h-8zM8 40h8v8h-8zM24 40h8v8h-8zM40 40h8v8h-8zM56 40h8v8h-8zM0 48h8v8h-8zM16 48h8v8h-8zM24 48h8v8h-8zM32 48h8v8h-8zM48 48h8v8h-8zM56 48h8v8h-8zM8 56h8v8h-8zM24 56h8v8h-8zM40 56h8v8h-8zM56 56h8v8h-8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM8 0h8v8h-8zM16 0h8v8h-8zM32 0h8v8h-8zM40 0h8v8h-8zM48 0h8v8h-8zM8 8h8v8h-8zM24 8h8v8h-8zM40 8h8v8h-8zM56 8h8v8h-8zM0 16h8v8h-8zM16 16h8v8h-8zM24 16h8v8h-8zM32 16h8v8h-8zM48 16h8v8h-8zM56 16h8v8h-8zM8 24h8v8h-8zM24 24h8v8h-8zM40 24h8v8h-8zM56 24h8v8h-8zM0 32h8v8h-8zM8 32h8v8h-8zM16 32h8v8h-8zM32 32h8v8h-8zM40 32h8v8h-8zM48 32h8v8h-8zM8 40h8v8h-8zM24 40h8v8h-8zM40 40h8v8h-8zM56 40h8v8h-8zM0 48h8v8h-8zM16 48h8v8h-8zM24 48h8v8h-8zM32 48h8v8h-8zM48 48h8v8h-8zM56 48h8v8h-8zM8 56h8v8h-8zM24 56h8v8h-8zM40 56h8v8h-8zM56 56h8v8h-8z'/%3E%3C/svg%3E");-webkit-mask-size:64px 64px;mask-size:64px 64px}62.5%{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM8 0h8v8h-8zM16 0h8v8h-8zM24 0h8v8h-8zM32 0h8v8h-8zM40 0h8v8h-8zM48 0h8v8h-8zM56 0h8v8h-8zM8 8h8v8h-8zM24 8h8v8h-8zM40 8h8v8h-8zM56 8h8v8h-8zM0 16h8v8h-8zM8 16h8v8h-8zM16 16h8v8h-8zM24 16h8v8h-8zM32 16h8v8h-8zM40 16h8v8h-8zM48 16h8v8h-8zM56 16h8v8h-8zM8 24h8v8h-8zM24 24h8v8h-8zM40 24h8v8h-8zM56 24h8v8h-8zM0 32h8v8h-8zM8 32h8v8h-8zM16 32h8v8h-8zM24 32h8v8h-8zM32 32h8v8h-8zM40 32h8v8h-8zM48 32h8v8h-8zM56 32h8v8h-8zM8 40h8v8h-8zM24 40h8v8h-8zM40 40h8v8h-8zM56 40h8v8h-8zM0 48h8v8h-8zM8 48h8v8h-8zM16 48h8v8h-8zM24 48h8v8h-8zM32 48h8v8h-8zM40 48h8v8h-8zM48 48h8v8h-8zM56 48h8v8h-8zM8 56h8v8h-8zM24 56h8v8h-8zM40 56h8v8h-8zM56 56h8v8h-8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM8 0h8v8h-8zM16 0h8v8h-8zM24 0h8v8h-8zM32 0h8v8h-8zM40 0h8v8h-8zM48 0h8v8h-8zM56 0h8v8h-8zM8 8h8v8h-8zM24 8h8v8h-8zM40 8h8v8h-8zM56 8h8v8h-8zM0 16h8v8h-8zM8 16h8v8h-8zM16 16h8v8h-8zM24 16h8v8h-8zM32 16h8v8h-8zM40 16h8v8h-8zM48 16h8v8h-8zM56 16h8v8h-8zM8 24h8v8h-8zM24 24h8v8h-8zM40 24h8v8h-8zM56 24h8v8h-8zM0 32h8v8h-8zM8 32h8v8h-8zM16 32h8v8h-8zM24 32h8v8h-8zM32 32h8v8h-8zM40 32h8v8h-8zM48 32h8v8h-8zM56 32h8v8h-8zM8 40h8v8h-8zM24 40h8v8h-8zM40 40h8v8h-8zM56 40h8v8h-8zM0 48h8v8h-8zM8 48h8v8h-8zM16 48h8v8h-8zM24 48h8v8h-8zM32 48h8v8h-8zM40 48h8v8h-8zM48 48h8v8h-8zM56 48h8v8h-8zM8 56h8v8h-8zM24 56h8v8h-8zM40 56h8v8h-8zM56 56h8v8h-8z'/%3E%3C/svg%3E");-webkit-mask-size:64px 64px;mask-size:64px 64px}75.0%{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM8 0h8v8h-8zM16 0h8v8h-8zM24 0h8v8h-8zM32 0h8v8h-8zM40 0h8v8h-8zM48 0h8v8h-8zM56 0h8v8h-8zM0 8h8v8h-8zM8 8h8v8h-8zM24 8h8v8h-8zM32 8h8v8h-8zM40 8h8v8h-8zM56 8h8v8h-8zM0 16h8v8h-8zM8 16h8v8h-8zM16 16h8v8h-8zM24 16h8v8h-8zM32 16h8v8h-8zM40 16h8v8h-8zM48 16h8v8h-8zM56 16h8v8h-8zM8 24h8v8h-8zM16 24h8v8h-8zM24 24h8v8h-8zM40 24h8v8h-8zM48 24h8v8h-8zM56 24h8v8h-8zM0 32h8v8h-8zM8 32h8v8h-8zM16 32h8v8h-8zM24 32h8v8h-8zM32 32h8v8h-8zM40 32h8v8h-8zM48 32h8v8h-8zM56 32h8v8h-8zM0 40h8v8h-8zM8 40h8v8h-8zM24 40h8v8h-8zM32 40h8v8h-8zM40 40h8v8h-8zM56 40h8v8h-8zM0 48h8v8h-8zM8 48h8v8h-8zM16 48h8v8h-8zM24 48h8v8h-8zM32 48h8v8h-8zM40 48h8v8h-8zM48 48h8v8h-8zM56 48h8v8h-8zM8 56h8v8h-8zM16 56h8v8h-8zM24 56h8v8h-8zM40 56h8v8h-8zM48 56h8v8h-8zM56 56h8v8h-8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM8 0h8v8h-8zM16 0h8v8h-8zM24 0h8v8h-8zM32 0h8v8h-8zM40 0h8v8h-8zM48 0h8v8h-8zM56 0h8v8h-8zM0 8h8v8h-8zM8 8h8v8h-8zM24 8h8v8h-8zM32 8h8v8h-8zM40 8h8v8h-8zM56 8h8v8h-8zM0 16h8v8h-8zM8 16h8v8h-8zM16 16h8v8h-8zM24 16h8v8h-8zM32 16h8v8h-8zM40 16h8v8h-8zM48 16h8v8h-8zM56 16h8v8h-8zM8 24h8v8h-8zM16 24h8v8h-8zM24 24h8v8h-8zM40 24h8v8h-8zM48 24h8v8h-8zM56 24h8v8h-8zM0 32h8v8h-8zM8 32h8v8h-8zM16 32h8v8h-8zM24 32h8v8h-8zM32 32h8v8h-8zM40 32h8v8h-8zM48 32h8v8h-8zM56 32h8v8h-8zM0 40h8v8h-8zM8 40h8v8h-8zM24 40h8v8h-8zM32 40h8v8h-8zM40 40h8v8h-8zM56 40h8v8h-8zM0 48h8v8h-8zM8 48h8v8h-8zM16 48h8v8h-8zM24 48h8v8h-8zM32 48h8v8h-8zM40 48h8v8h-8zM48 48h8v8h-8zM56 48h8v8h-8zM8 56h8v8h-8zM16 56h8v8h-8zM24 56h8v8h-8zM40 56h8v8h-8zM48 56h8v8h-8zM56 56h8v8h-8z'/%3E%3C/svg%3E");-webkit-mask-size:64px 64px;mask-size:64px 64px}87.5%{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM8 0h8v8h-8zM16 0h8v8h-8zM24 0h8v8h-8zM32 0h8v8h-8zM40 0h8v8h-8zM48 0h8v8h-8zM56 0h8v8h-8zM0 8h8v8h-8zM8 8h8v8h-8zM16 8h8v8h-8zM24 8h8v8h-8zM32 8h8v8h-8zM40 8h8v8h-8zM48 8h8v8h-8zM56 8h8v8h-8zM0 16h8v8h-8zM8 16h8v8h-8zM16 16h8v8h-8zM24 16h8v8h-8zM32 16h8v8h-8zM40 16h8v8h-8zM48 16h8v8h-8zM56 16h8v8h-8zM0 24h8v8h-8zM8 24h8v8h-8zM16 24h8v8h-8zM24 24h8v8h-8zM32 24h8v8h-8zM40 24h8v8h-8zM48 24h8v8h-8zM56 24h8v8h-8zM0 32h8v8h-8zM8 32h8v8h-8zM16 32h8v8h-8zM24 32h8v8h-8zM32 32h8v8h-8zM40 32h8v8h-8zM48 32h8v8h-8zM56 32h8v8h-8zM0 40h8v8h-8zM8 40h8v8h-8zM16 40h8v8h-8zM24 40h8v8h-8zM32 40h8v8h-8zM40 40h8v8h-8zM48 40h8v8h-8zM56 40h8v8h-8zM0 48h8v8h-8zM8 48h8v8h-8zM16 48h8v8h-8zM24 48h8v8h-8zM32 48h8v8h-8zM40 48h8v8h-8zM48 48h8v8h-8zM56 48h8v8h-8zM0 56h8v8h-8zM8 56h8v8h-8zM16 56h8v8h-8zM24 56h8v8h-8zM32 56h8v8h-8zM40 56h8v8h-8zM48 56h8v8h-8zM56 56h8v8h-8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM8 0h8v8h-8zM16 0h8v8h-8zM24 0h8v8h-8zM32 0h8v8h-8zM40 0h8v8h-8zM48 0h8v8h-8zM56 0h8v8h-8zM0 8h8v8h-8zM8 8h8v8h-8zM16 8h8v8h-8zM24 8h8v8h-8zM32 8h8v8h-8zM40 8h8v8h-8zM48 8h8v8h-8zM56 8h8v8h-8zM0 16h8v8h-8zM8 16h8v8h-8zM16 16h8v8h-8zM24 16h8v8h-8zM32 16h8v8h-8zM40 16h8v8h-8zM48 16h8v8h-8zM56 16h8v8h-8zM0 24h8v8h-8zM8 24h8v8h-8zM16 24h8v8h-8zM24 24h8v8h-8zM32 24h8v8h-8zM40 24h8v8h-8zM48 24h8v8h-8zM56 24h8v8h-8zM0 32h8v8h-8zM8 32h8v8h-8zM16 32h8v8h-8zM24 32h8v8h-8zM32 32h8v8h-8zM40 32h8v8h-8zM48 32h8v8h-8zM56 32h8v8h-8zM0 40h8v8h-8zM8 40h8v8h-8zM16 40h8v8h-8zM24 40h8v8h-8zM32 40h8v8h-8zM40 40h8v8h-8zM48 40h8v8h-8zM56 40h8v8h-8zM0 48h8v8h-8zM8 48h8v8h-8zM16 48h8v8h-8zM24 48h8v8h-8zM32 48h8v8h-8zM40 48h8v8h-8zM48 48h8v8h-8zM56 48h8v8h-8zM0 56h8v8h-8zM8 56h8v8h-8zM16 56h8v8h-8zM24 56h8v8h-8zM32 56h8v8h-8zM40 56h8v8h-8zM48 56h8v8h-8zM56 56h8v8h-8z'/%3E%3C/svg%3E");-webkit-mask-size:64px 64px;mask-size:64px 64px}100%{-webkit-mask-image:none;mask-image:none}}
@keyframes ri-print-b{0.0%{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM32 0h8v8h-8zM16 16h8v8h-8zM48 16h8v8h-8zM0 32h8v8h-8zM32 32h8v8h-8zM16 48h8v8h-8zM48 48h8v8h-8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM32 0h8v8h-8zM16 16h8v8h-8zM48 16h8v8h-8zM0 32h8v8h-8zM32 32h8v8h-8zM16 48h8v8h-8zM48 48h8v8h-8z'/%3E%3C/svg%3E");-webkit-mask-size:64px 64px;mask-size:64px 64px}12.5%{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM16 0h8v8h-8zM32 0h8v8h-8zM48 0h8v8h-8zM0 16h8v8h-8zM16 16h8v8h-8zM32 16h8v8h-8zM48 16h8v8h-8zM0 32h8v8h-8zM16 32h8v8h-8zM32 32h8v8h-8zM48 32h8v8h-8zM0 48h8v8h-8zM16 48h8v8h-8zM32 48h8v8h-8zM48 48h8v8h-8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM16 0h8v8h-8zM32 0h8v8h-8zM48 0h8v8h-8zM0 16h8v8h-8zM16 16h8v8h-8zM32 16h8v8h-8zM48 16h8v8h-8zM0 32h8v8h-8zM16 32h8v8h-8zM32 32h8v8h-8zM48 32h8v8h-8zM0 48h8v8h-8zM16 48h8v8h-8zM32 48h8v8h-8zM48 48h8v8h-8z'/%3E%3C/svg%3E");-webkit-mask-size:64px 64px;mask-size:64px 64px}25.0%{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM16 0h8v8h-8zM32 0h8v8h-8zM48 0h8v8h-8zM8 8h8v8h-8zM40 8h8v8h-8zM0 16h8v8h-8zM16 16h8v8h-8zM32 16h8v8h-8zM48 16h8v8h-8zM24 24h8v8h-8zM56 24h8v8h-8zM0 32h8v8h-8zM16 32h8v8h-8zM32 32h8v8h-8zM48 32h8v8h-8zM8 40h8v8h-8zM40 40h8v8h-8zM0 48h8v8h-8zM16 48h8v8h-8zM32 48h8v8h-8zM48 48h8v8h-8zM24 56h8v8h-8zM56 56h8v8h-8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM16 0h8v8h-8zM32 0h8v8h-8zM48 0h8v8h-8zM8 8h8v8h-8zM40 8h8v8h-8zM0 16h8v8h-8zM16 16h8v8h-8zM32 16h8v8h-8zM48 16h8v8h-8zM24 24h8v8h-8zM56 24h8v8h-8zM0 32h8v8h-8zM16 32h8v8h-8zM32 32h8v8h-8zM48 32h8v8h-8zM8 40h8v8h-8zM40 40h8v8h-8zM0 48h8v8h-8zM16 48h8v8h-8zM32 48h8v8h-8zM48 48h8v8h-8zM24 56h8v8h-8zM56 56h8v8h-8z'/%3E%3C/svg%3E");-webkit-mask-size:64px 64px;mask-size:64px 64px}37.5%{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM16 0h8v8h-8zM32 0h8v8h-8zM48 0h8v8h-8zM8 8h8v8h-8zM24 8h8v8h-8zM40 8h8v8h-8zM56 8h8v8h-8zM0 16h8v8h-8zM16 16h8v8h-8zM32 16h8v8h-8zM48 16h8v8h-8zM8 24h8v8h-8zM24 24h8v8h-8zM40 24h8v8h-8zM56 24h8v8h-8zM0 32h8v8h-8zM16 32h8v8h-8zM32 32h8v8h-8zM48 32h8v8h-8zM8 40h8v8h-8zM24 40h8v8h-8zM40 40h8v8h-8zM56 40h8v8h-8zM0 48h8v8h-8zM16 48h8v8h-8zM32 48h8v8h-8zM48 48h8v8h-8zM8 56h8v8h-8zM24 56h8v8h-8zM40 56h8v8h-8zM56 56h8v8h-8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM16 0h8v8h-8zM32 0h8v8h-8zM48 0h8v8h-8zM8 8h8v8h-8zM24 8h8v8h-8zM40 8h8v8h-8zM56 8h8v8h-8zM0 16h8v8h-8zM16 16h8v8h-8zM32 16h8v8h-8zM48 16h8v8h-8zM8 24h8v8h-8zM24 24h8v8h-8zM40 24h8v8h-8zM56 24h8v8h-8zM0 32h8v8h-8zM16 32h8v8h-8zM32 32h8v8h-8zM48 32h8v8h-8zM8 40h8v8h-8zM24 40h8v8h-8zM40 40h8v8h-8zM56 40h8v8h-8zM0 48h8v8h-8zM16 48h8v8h-8zM32 48h8v8h-8zM48 48h8v8h-8zM8 56h8v8h-8zM24 56h8v8h-8zM40 56h8v8h-8zM56 56h8v8h-8z'/%3E%3C/svg%3E");-webkit-mask-size:64px 64px;mask-size:64px 64px}50.0%{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM8 0h8v8h-8zM16 0h8v8h-8zM32 0h8v8h-8zM40 0h8v8h-8zM48 0h8v8h-8zM8 8h8v8h-8zM24 8h8v8h-8zM40 8h8v8h-8zM56 8h8v8h-8zM0 16h8v8h-8zM16 16h8v8h-8zM24 16h8v8h-8zM32 16h8v8h-8zM48 16h8v8h-8zM56 16h8v8h-8zM8 24h8v8h-8zM24 24h8v8h-8zM40 24h8v8h-8zM56 24h8v8h-8zM0 32h8v8h-8zM8 32h8v8h-8zM16 32h8v8h-8zM32 32h8v8h-8zM40 32h8v8h-8zM48 32h8v8h-8zM8 40h8v8h-8zM24 40h8v8h-8zM40 40h8v8h-8zM56 40h8v8h-8zM0 48h8v8h-8zM16 48h8v8h-8zM24 48h8v8h-8zM32 48h8v8h-8zM48 48h8v8h-8zM56 48h8v8h-8zM8 56h8v8h-8zM24 56h8v8h-8zM40 56h8v8h-8zM56 56h8v8h-8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM8 0h8v8h-8zM16 0h8v8h-8zM32 0h8v8h-8zM40 0h8v8h-8zM48 0h8v8h-8zM8 8h8v8h-8zM24 8h8v8h-8zM40 8h8v8h-8zM56 8h8v8h-8zM0 16h8v8h-8zM16 16h8v8h-8zM24 16h8v8h-8zM32 16h8v8h-8zM48 16h8v8h-8zM56 16h8v8h-8zM8 24h8v8h-8zM24 24h8v8h-8zM40 24h8v8h-8zM56 24h8v8h-8zM0 32h8v8h-8zM8 32h8v8h-8zM16 32h8v8h-8zM32 32h8v8h-8zM40 32h8v8h-8zM48 32h8v8h-8zM8 40h8v8h-8zM24 40h8v8h-8zM40 40h8v8h-8zM56 40h8v8h-8zM0 48h8v8h-8zM16 48h8v8h-8zM24 48h8v8h-8zM32 48h8v8h-8zM48 48h8v8h-8zM56 48h8v8h-8zM8 56h8v8h-8zM24 56h8v8h-8zM40 56h8v8h-8zM56 56h8v8h-8z'/%3E%3C/svg%3E");-webkit-mask-size:64px 64px;mask-size:64px 64px}62.5%{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM8 0h8v8h-8zM16 0h8v8h-8zM24 0h8v8h-8zM32 0h8v8h-8zM40 0h8v8h-8zM48 0h8v8h-8zM56 0h8v8h-8zM8 8h8v8h-8zM24 8h8v8h-8zM40 8h8v8h-8zM56 8h8v8h-8zM0 16h8v8h-8zM8 16h8v8h-8zM16 16h8v8h-8zM24 16h8v8h-8zM32 16h8v8h-8zM40 16h8v8h-8zM48 16h8v8h-8zM56 16h8v8h-8zM8 24h8v8h-8zM24 24h8v8h-8zM40 24h8v8h-8zM56 24h8v8h-8zM0 32h8v8h-8zM8 32h8v8h-8zM16 32h8v8h-8zM24 32h8v8h-8zM32 32h8v8h-8zM40 32h8v8h-8zM48 32h8v8h-8zM56 32h8v8h-8zM8 40h8v8h-8zM24 40h8v8h-8zM40 40h8v8h-8zM56 40h8v8h-8zM0 48h8v8h-8zM8 48h8v8h-8zM16 48h8v8h-8zM24 48h8v8h-8zM32 48h8v8h-8zM40 48h8v8h-8zM48 48h8v8h-8zM56 48h8v8h-8zM8 56h8v8h-8zM24 56h8v8h-8zM40 56h8v8h-8zM56 56h8v8h-8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM8 0h8v8h-8zM16 0h8v8h-8zM24 0h8v8h-8zM32 0h8v8h-8zM40 0h8v8h-8zM48 0h8v8h-8zM56 0h8v8h-8zM8 8h8v8h-8zM24 8h8v8h-8zM40 8h8v8h-8zM56 8h8v8h-8zM0 16h8v8h-8zM8 16h8v8h-8zM16 16h8v8h-8zM24 16h8v8h-8zM32 16h8v8h-8zM40 16h8v8h-8zM48 16h8v8h-8zM56 16h8v8h-8zM8 24h8v8h-8zM24 24h8v8h-8zM40 24h8v8h-8zM56 24h8v8h-8zM0 32h8v8h-8zM8 32h8v8h-8zM16 32h8v8h-8zM24 32h8v8h-8zM32 32h8v8h-8zM40 32h8v8h-8zM48 32h8v8h-8zM56 32h8v8h-8zM8 40h8v8h-8zM24 40h8v8h-8zM40 40h8v8h-8zM56 40h8v8h-8zM0 48h8v8h-8zM8 48h8v8h-8zM16 48h8v8h-8zM24 48h8v8h-8zM32 48h8v8h-8zM40 48h8v8h-8zM48 48h8v8h-8zM56 48h8v8h-8zM8 56h8v8h-8zM24 56h8v8h-8zM40 56h8v8h-8zM56 56h8v8h-8z'/%3E%3C/svg%3E");-webkit-mask-size:64px 64px;mask-size:64px 64px}75.0%{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM8 0h8v8h-8zM16 0h8v8h-8zM24 0h8v8h-8zM32 0h8v8h-8zM40 0h8v8h-8zM48 0h8v8h-8zM56 0h8v8h-8zM0 8h8v8h-8zM8 8h8v8h-8zM24 8h8v8h-8zM32 8h8v8h-8zM40 8h8v8h-8zM56 8h8v8h-8zM0 16h8v8h-8zM8 16h8v8h-8zM16 16h8v8h-8zM24 16h8v8h-8zM32 16h8v8h-8zM40 16h8v8h-8zM48 16h8v8h-8zM56 16h8v8h-8zM8 24h8v8h-8zM16 24h8v8h-8zM24 24h8v8h-8zM40 24h8v8h-8zM48 24h8v8h-8zM56 24h8v8h-8zM0 32h8v8h-8zM8 32h8v8h-8zM16 32h8v8h-8zM24 32h8v8h-8zM32 32h8v8h-8zM40 32h8v8h-8zM48 32h8v8h-8zM56 32h8v8h-8zM0 40h8v8h-8zM8 40h8v8h-8zM24 40h8v8h-8zM32 40h8v8h-8zM40 40h8v8h-8zM56 40h8v8h-8zM0 48h8v8h-8zM8 48h8v8h-8zM16 48h8v8h-8zM24 48h8v8h-8zM32 48h8v8h-8zM40 48h8v8h-8zM48 48h8v8h-8zM56 48h8v8h-8zM8 56h8v8h-8zM16 56h8v8h-8zM24 56h8v8h-8zM40 56h8v8h-8zM48 56h8v8h-8zM56 56h8v8h-8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM8 0h8v8h-8zM16 0h8v8h-8zM24 0h8v8h-8zM32 0h8v8h-8zM40 0h8v8h-8zM48 0h8v8h-8zM56 0h8v8h-8zM0 8h8v8h-8zM8 8h8v8h-8zM24 8h8v8h-8zM32 8h8v8h-8zM40 8h8v8h-8zM56 8h8v8h-8zM0 16h8v8h-8zM8 16h8v8h-8zM16 16h8v8h-8zM24 16h8v8h-8zM32 16h8v8h-8zM40 16h8v8h-8zM48 16h8v8h-8zM56 16h8v8h-8zM8 24h8v8h-8zM16 24h8v8h-8zM24 24h8v8h-8zM40 24h8v8h-8zM48 24h8v8h-8zM56 24h8v8h-8zM0 32h8v8h-8zM8 32h8v8h-8zM16 32h8v8h-8zM24 32h8v8h-8zM32 32h8v8h-8zM40 32h8v8h-8zM48 32h8v8h-8zM56 32h8v8h-8zM0 40h8v8h-8zM8 40h8v8h-8zM24 40h8v8h-8zM32 40h8v8h-8zM40 40h8v8h-8zM56 40h8v8h-8zM0 48h8v8h-8zM8 48h8v8h-8zM16 48h8v8h-8zM24 48h8v8h-8zM32 48h8v8h-8zM40 48h8v8h-8zM48 48h8v8h-8zM56 48h8v8h-8zM8 56h8v8h-8zM16 56h8v8h-8zM24 56h8v8h-8zM40 56h8v8h-8zM48 56h8v8h-8zM56 56h8v8h-8z'/%3E%3C/svg%3E");-webkit-mask-size:64px 64px;mask-size:64px 64px}87.5%{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM8 0h8v8h-8zM16 0h8v8h-8zM24 0h8v8h-8zM32 0h8v8h-8zM40 0h8v8h-8zM48 0h8v8h-8zM56 0h8v8h-8zM0 8h8v8h-8zM8 8h8v8h-8zM16 8h8v8h-8zM24 8h8v8h-8zM32 8h8v8h-8zM40 8h8v8h-8zM48 8h8v8h-8zM56 8h8v8h-8zM0 16h8v8h-8zM8 16h8v8h-8zM16 16h8v8h-8zM24 16h8v8h-8zM32 16h8v8h-8zM40 16h8v8h-8zM48 16h8v8h-8zM56 16h8v8h-8zM0 24h8v8h-8zM8 24h8v8h-8zM16 24h8v8h-8zM24 24h8v8h-8zM32 24h8v8h-8zM40 24h8v8h-8zM48 24h8v8h-8zM56 24h8v8h-8zM0 32h8v8h-8zM8 32h8v8h-8zM16 32h8v8h-8zM24 32h8v8h-8zM32 32h8v8h-8zM40 32h8v8h-8zM48 32h8v8h-8zM56 32h8v8h-8zM0 40h8v8h-8zM8 40h8v8h-8zM16 40h8v8h-8zM24 40h8v8h-8zM32 40h8v8h-8zM40 40h8v8h-8zM48 40h8v8h-8zM56 40h8v8h-8zM0 48h8v8h-8zM8 48h8v8h-8zM16 48h8v8h-8zM24 48h8v8h-8zM32 48h8v8h-8zM40 48h8v8h-8zM48 48h8v8h-8zM56 48h8v8h-8zM0 56h8v8h-8zM8 56h8v8h-8zM16 56h8v8h-8zM24 56h8v8h-8zM32 56h8v8h-8zM40 56h8v8h-8zM48 56h8v8h-8zM56 56h8v8h-8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM8 0h8v8h-8zM16 0h8v8h-8zM24 0h8v8h-8zM32 0h8v8h-8zM40 0h8v8h-8zM48 0h8v8h-8zM56 0h8v8h-8zM0 8h8v8h-8zM8 8h8v8h-8zM16 8h8v8h-8zM24 8h8v8h-8zM32 8h8v8h-8zM40 8h8v8h-8zM48 8h8v8h-8zM56 8h8v8h-8zM0 16h8v8h-8zM8 16h8v8h-8zM16 16h8v8h-8zM24 16h8v8h-8zM32 16h8v8h-8zM40 16h8v8h-8zM48 16h8v8h-8zM56 16h8v8h-8zM0 24h8v8h-8zM8 24h8v8h-8zM16 24h8v8h-8zM24 24h8v8h-8zM32 24h8v8h-8zM40 24h8v8h-8zM48 24h8v8h-8zM56 24h8v8h-8zM0 32h8v8h-8zM8 32h8v8h-8zM16 32h8v8h-8zM24 32h8v8h-8zM32 32h8v8h-8zM40 32h8v8h-8zM48 32h8v8h-8zM56 32h8v8h-8zM0 40h8v8h-8zM8 40h8v8h-8zM16 40h8v8h-8zM24 40h8v8h-8zM32 40h8v8h-8zM40 40h8v8h-8zM48 40h8v8h-8zM56 40h8v8h-8zM0 48h8v8h-8zM8 48h8v8h-8zM16 48h8v8h-8zM24 48h8v8h-8zM32 48h8v8h-8zM40 48h8v8h-8zM48 48h8v8h-8zM56 48h8v8h-8zM0 56h8v8h-8zM8 56h8v8h-8zM16 56h8v8h-8zM24 56h8v8h-8zM32 56h8v8h-8zM40 56h8v8h-8zM48 56h8v8h-8zM56 56h8v8h-8z'/%3E%3C/svg%3E");-webkit-mask-size:64px 64px;mask-size:64px 64px}100%{-webkit-mask-image:none;mask-image:none}}