/* The type system in six roles across every page (swarm stream: type, 20 Oct 2026; set for Instrument Serif on 21 Oct). Loaded after every other stylesheet. */ /* Roles, 390 → 1440 (linear between, held outside): XL the page's h1 (every page title, the case title) and the about page's company names 56 → 144, leading 1 L chapter titles and the scene words (steps, industries, the footer line, the next case) 44 → 96, leading 1 M lists and statements at display size (services, the about statement, case step lines) 32 → 64, leading 1.05 all three in the display face, Instrument Serif Regular (below); at 1440 they step by 1.5 (144 / 96 / 64), the steps the eye reads as rank, not as noise. Tracking follows the size, not the role (a display serif closes up as it grows): calc(.55px - .0239em) is -.020em at 144, -.018 at 96, -.015 at 64 and -.014 at 56, -.022 for the years' numerals (in their slots) and -.023 for the «10»; from 46 px down (the phones' L and M) it holds at -.012em, the brief's lightest (FILM.md §6: -.012 to -.02em by size). The face's own fit already lets a few foot serifs meet at display size («ki», «km», «ty», «rv»: HarfBuzz, 21 Oct); at -.02em they meet a little more, and the rest of the alphabet keeps clear of each other. Leading: 1 is the least at which the serif's descenders clear the next line's ascenders in the site's own two-line titles (HarfBuzz outlines, 21 Oct: «Where the practice / was shaped.» p over d .026em clear at 1, touching at .98; «From the system / to the smallest detail.» y over l .019em at 1). The hero takes 1.02: its «Senior digital / product designer.» has g over d only .007em apart at 1 (.027 at 1.02). M runs to several lines, 1.05. The home hero is set to the scene, not to XL: 96 at 1440 (lead review, 20 Oct: the planet's rim is composed around a 96 px title; larger, the rim ran through the words, dots round words, which the owner's rules forbid). The serif sets a line about a seventh narrower than Archivo did at the same size («Complex products.» 606 px at 96 where Archivo's was 704), so the rim keeps more air; past 1440 it grows on to 112 at 1920 (its rule below). On phones its lines cannot wrap: it is the size at which the longest line, «Complex products.», fills the hero's measure (the window less 44 px) to 96 %: 41 at 320, 52 at 390, 57 at 430 (46 was Archivo's ceiling there). The other pages keep phone titles of 56. lead 24 → 19 · body 17 → 16 · small 14 → 13: Basel Grotesk, tracking 0. The hero is the largest heading of every page; only the art pieces exceed it: the station names (13.5vw, canvas), the years numerals, the «10», the footer wordmark and the type ribbon, which keep their own sizes here and take the face, its tracking by size and no axes below. Specificity: html body plus four empty id tests, so one rule here outranks the override layers in space*.css, home-2026.css and the portfolio-v* files without touching them. */ /* The display face is Instrument Serif (SIL OFL 1.1, fonts/InstrumentSerif-OFL.txt), on the main site since 21 Oct 2026: the owner picked it on the font switch («давай его») and then «у нас была задача заменить шрифт надо пока поставить его». It keeps the family name 'Archivo Lens' so every role, canvas and script that names the display face takes it. One static cut: Regular only (no italic is declared, so no accent word can turn italic), and its weight range claims every weight, so a bold request anywhere draws this cut instead of a synthesised bold. size-adjust 104 % as on the switch (js/portfolio-theme.js FONTS): its x-height then meets Archivo's (.530em against .526), so the roles kept their sizes; its capitals stand .749em, its ascenders .778em, its descenders .224em. Before: fonts/archivo-vf.woff2, wght 400, wdth 98 (css/space.css declared it; that face is gone, so a letter the serif lacks falls to Basel instead of fetching Archivo). */ @font-face{font-family:'Archivo Lens';src:url('../fonts/instrument-serif.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;size-adjust:104%} /* (-73, 24 Oct; QA-73 row 20) the face's hyphen is .43em wide, its stroke .27em with .082em of air each side (the f kerns into it by .048em, the s does not), so a hyphenated title read as a spaced dash, «Self – service», wherever it is set as plain text: the next case's card, /about's years and recognition rows. This face holds the same hyphen with .052em each side (.37em), the spacing the case title's letters already had (css/case-story.css), for every heading at once. It is fonts/instrument-serif-hyphen.woff2 (620 bytes: the hyphen alone, subset from fonts/instrument-serif.woff2, OFL 1.1 with no reserved name; the licence travels in fonts/InstrumentSerif-OFL.txt and its name table), inlined so the hyphen never swaps; the later rule wins U+2D. Across the two faces there is no kerning, so «Self-» keeps .028em */ @font-face{font-family:'Archivo Lens';src:url(data:font/woff2;base64,d09GMgABAAAAAAJsAAsAAAAABbQAAAIgAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmAANBEICmRsATYCJAMICwYABCAFhkwHIBv1BBFVlBKSnwk2nfKFsZKx15aLO1ve/WRGvjMeoZLzEI19ezO7p5pM2r/kWChk9SgaTxpiJZEJ0SRDheiVS1YP0AGwpdPAtGhKinoHeCowPJnkk+TC1Kn6GMB4NgY0UZkTLLomSFobk3olam1xrGBji9WwVxKqevOiRFKR4i6XyaUoHqHGi3iuiXyYx3G4bIyz5qJBxgIMwhh+pVEo33e/yCeJJQTEbsaEgkTBoCIctZpAbQYae3tE2/saoMXi/oAEFQUjmARUkKKzdh55GC2bHV2PNG+0X+xq6Tz1MCKBDiC4u9naer+b1/y2I+OHjh9yMNvbu8nconcDgeDnt41n5xz436r8gh/t22v4mc9GF/bW4l8ZRrMEgQFenhRAFlYIVU8WuRa3LPipd7uP62p1VRG1DZ+YsTDvE5a6bWHFq6hYdSjeYU3uZGLN9uW9/3S3pdx5uUXVP0cfFPpJvw/XwcJBKcp1YUuFK8vRwTlTar8UNmoNxAJLQbWSuTE+aqg/8YsKc4xj2KK/LgjjLkNS9/+rQC0vrT+Uf3APk/bpxenZ6c5CVQ2L1nWWF+HEqYHK/H8NJH5b+LQfHEsvMOqbIYalbxaoqHQIf4kziev7Qzj7etRkx/cPghjfWsY0SdAypBtU3UetFBBjWPoR/wZTHOJkffQ9+lxeeKdEuTwlOMP+5MXeNjDDeu9P+kLyxbFSQYk5Entztnvchr3jTgUAAAA=) format('woff2');font-weight:100 900;font-style:normal;font-display:swap;size-adjust:104%;unicode-range:U+2D} :root{ --t-xl:clamp(44px,calc(8.381vw + 23.3px),144px); --t-hero:clamp(40px,calc(4.762vw + 27.4px),96px); --t-l:clamp(40px,calc(4.952vw + 24.7px),96px); --t-m:clamp(28px,calc(3.048vw + 20.1px),64px); --t-lead:clamp(19px,calc(.476vw + 17.14px),24px); --t-body:clamp(16px,calc(.095vw + 15.63px),17px); --t-small:clamp(13px,calc(.095vw + 12.63px),14px); --t-display:'Archivo Lens',Basel,Arial,sans-serif; --t-text:Basel,Arial,sans-serif; /* tracking by size (em resolves on the element that uses it); -l and -m stay as names because the font switch sets them per face (html[data-font]) */ --t-track:min(-.012em,calc(.55px - .0239em)); --t-track-l:var(--t-track); --t-track-m:var(--t-track); --t-lh-xl:1; --t-lh-hero:1.02; --t-lh-l:1; --t-lh-m:1.05; } /* the hero on phones: the size at which «Complex products.» fills the window less 44 px to 96 % (see the roles above) */ @media (max-width:700px){:root{--t-hero:clamp(40px,calc(15vw - 7px),58px)}} /* past 1440 the world grows with the window and a held 96 shrank against it (5 % of 1920, display to body 5.6:1): the hero grows on to 112 at 1920 (6.6:1, FILM.md §6 asks 6-12), where «product designer.» still ends about 220 px short of the limb's lit edge (the limb's place in screen fractions, js/3d/space-orbit.js HERO_WIDE, measured on base-w1's 1440 frame). At 1440 it stays 96: at 104 that line's full stop came within about 65 px of the lit edge, 112 within 20. */ @media (min-width:1441px){:root{--t-hero:clamp(96px,calc(3.333vw + 48px),112px)}} /* ---------- Display XL: the page's h1 ---------- */ html body :is(#hero-title,h1#work-title,h1#about-title,h1#cv-title,h1[data-case-title],main h1,.page-hero h1,section h1):not(#_t):not(#_y):not(#_p):not(#_e){ font-family:var(--t-display)!important;font-variation-settings:normal!important;font-weight:400!important;font-style:normal!important; font-size:var(--t-xl)!important;line-height:var(--t-lh-xl)!important;letter-spacing:var(--t-track-l)!important;font-kerning:normal;font-synthesis:none;text-wrap:balance} /* the home hero: set to the planet's rim (see the roles above) */ html body[data-page=home] h1#hero-title:not(#_t):not(#_y):not(#_p):not(#_e){font-size:var(--t-hero)!important;line-height:var(--t-lh-hero)!important} /* about: the companies are the page's other names, XL; the line that introduces them («Work I'm proud to be part of.») is M, so each name leads its story (at one size they competed, 20 Oct) */ html body :is(h3#dfinity-title,h3#privatbank-title):not(#_t):not(#_y):not(#_p):not(#_e){ font-family:var(--t-display)!important;font-variation-settings:normal!important;font-weight:400!important;font-style:normal!important; font-size:var(--t-xl)!important;line-height:var(--t-lh-xl)!important;letter-spacing:var(--t-track-l)!important;font-kerning:normal;font-synthesis:none} /* The case title is XL like every page title. The per-case fit some pages carry (--case-title-fit, written into the page, measured for Archivo at up to 270 px) is not applied: the XL rule above outranks it, as it already did (Walkman Hotline, fit .77, drew at 144 in base-w1). At XL the serif fits every case name's longest word in its column (OBEGRÄNSAD, the longest, 689 of 799 px at 1440 and 271 of 346 at 390: HarfBuzz, 21 Oct). */ /* ---------- Display L: chapter titles, scene words, the footer line, the next case ---------- */ html body :is( h2#work-title,#approach-title,#principles-title,#services-title,#pass-title, .years-title,#footer .footer-top h2,.case-next h2, .process-panel h3 ):not(#_t):not(#_y):not(#_p):not(#_e){ font-family:var(--t-display)!important;font-variation-settings:normal!important;font-weight:400!important;font-style:normal!important; font-size:var(--t-l)!important;line-height:var(--t-lh-l)!important;letter-spacing:var(--t-track-l)!important;font-kerning:normal;font-synthesis:none;text-wrap:balance} /* ---------- Display M: lists and statements at display size ---------- */ /* the industry names joined M (20 Oct review): at L they stood the size of «Complex to clear. At every scale.», two dominants on one screen; the chapter's title leads, the names follow like the services' */ html body :is( .design-principles .industry-copy h3, #services .service-rows>a>h3, #about .about-intro>p[data-scroll-fill], .series-section .series-heading h2,.case-story h2, .case-source-heading>h2, /* 16 cases' section titles printed in Basel beside the serif title (22 Oct, review R15) */ #cv-practice,#cv-experience,#cv-selected,#cv-recognition,#cv-workflow,#companies-title, .gallery-scene-heading>h2,.explore-practice-notes h3, .career-row .cr-body h3,.recognition-row .rr-name ):not(#_t):not(#_y):not(#_p):not(#_e){ font-family:var(--t-display)!important;font-variation-settings:normal!important;font-weight:400!important;font-style:normal!important; font-size:var(--t-m)!important;line-height:var(--t-lh-m)!important;letter-spacing:var(--t-track-m)!important;font-kerning:normal;font-synthesis:none;text-wrap:balance} /* -72: every case's section titles are M in the display face (the visual jury, round 1: «the case-study heading face switches to the grotesk on id.ai only»). A sweep of the 66 cases at 1440 found 30 whose titles printed in Basel, or the old Webflow Baselgrotesk, at 63 px beside the serif cover title: the expanded chapters (id.ai, ICP dashboard, Toolkit, REM codes), the public case intros and chapters, the project sections' names, and the sections of FRO Dualle, LiveBridge, Miquel Barceló, OISY, NNS and Kinic. The only h2 under 40 px in a case is a label (Pass's «Project overview», .case-overview-title) and keeps its size */ html body.portfolio-case main section:not(.case-cover) h2:not(.case-overview-title):not(.sr-only):not(#_t):not(#_y):not(#_p):not(#_e){ font-family:var(--t-display)!important;font-variation-settings:normal!important;font-weight:400!important;font-style:normal!important; font-size:var(--t-m)!important;line-height:var(--t-lh-m)!important;letter-spacing:var(--t-track-m)!important;font-kerning:normal;font-synthesis:none;text-wrap:balance} html body.portfolio-case main section:not(.case-cover) h2:not(.case-overview-title) :is(span,div):not(.cs-unit):not(#_t):not(#_y):not(#_p){ font-family:inherit!important;font-variation-settings:inherit!important;font-style:inherit!important;font-size:inherit!important;letter-spacing:inherit!important} /* Split letters, words and masked lines inherit their heading's role (several had their own size or tracking). */ html body :is( #hero-title,h1,h2#work-title,#approach-title,#principles-title,#services-title,#pass-title,#companies-title, .years-title,#footer .footer-top h2,.case-next h2,.design-principles .industry-copy h3,.process-panel h3, #dfinity-title,#privatbank-title,#services .service-rows>a>h3,#about .about-intro>p[data-scroll-fill], .series-section .series-heading h2,.case-source-heading>h2,#cv-practice,#cv-experience,#cv-selected,.career-row .cr-body h3 ) :is(span,div):not(.cs-unit):not(#_t):not(#_y):not(#_p){ font-family:inherit!important;font-variation-settings:inherit!important;font-style:inherit!important;font-size:inherit!important;letter-spacing:inherit!important} /* ---------- Lead ---------- */ html body :is( .hero-frame .hero-copy .hero-note, .st-meta .st-line, .design-principles .industry-copy p, #years .years-lede,.years-lede, .approach-intro>p, #cv-title~.cv-profession ):not(#_t):not(#_y):not(#_p):not(#_e){ font-family:var(--t-text)!important;font-size:var(--t-lead)!important;line-height:1.3!important;letter-spacing:0!important} html body :is(.design-principles .industry-copy p,.approach-intro>p) :is(span,div):not(#_t):not(#_y){font-size:inherit!important;letter-spacing:inherit!important;line-height:inherit!important} /* ---------- Body ---------- */ html body :is( .process-panel>p,#design-bottom .process-panel p, #services .service-rows>a>p.service-description, .pass-copy>p,.wo-line ):not(#_t):not(#_y):not(#_p):not(#_e){ font-family:var(--t-text)!important;font-size:var(--t-body)!important;line-height:1.5!important;letter-spacing:0!important} html body :is(.pass-copy>p) :is(span,div):not(#_t):not(#_y){font-size:inherit!important;letter-spacing:inherit!important} /* ---------- Small ---------- */ html body :is( .hero-frame .hero-person p,.hero-frame .hero-person p span, #services .service-rows>a>p:not(.service-description), .year-info .year-names,.year-names .yn, #footer .footer-bottom>span,#footer .footer-bottom span, .case-next>p,.case-next-label ):not(#_t):not(#_y):not(#_p):not(#_e){ font-family:var(--t-text)!important;font-size:var(--t-small)!important;line-height:1.4!important;letter-spacing:0!important} /* Page titles keep their authored lines (/approach, /gallery, /work, /about): the XL line runs past a narrow opening column instead of breaking «Good design.» into two. */ html body h1[data-reveal]:not(#_t):not(#_y):not(#_p):not(#_e){white-space:nowrap!important} /* About: the figures inside a company story sit one role below its name, L (they were 150 px, as large as the name; at M they read as a list, 20 Oct). Its line under the name takes M. */ html body :is(dt .cs-line,dt>span):not(.cs-unit):not(#_t):not(#_y):not(#_p):not(#_e){ font-family:var(--t-display)!important;font-variation-settings:normal!important;font-style:normal!important; font-size:var(--t-l)!important;line-height:var(--t-lh-l)!important;letter-spacing:var(--t-track-l)!important;font-synthesis:none} html body .company-story .cs-lead:not(#_t):not(#_y):not(#_p):not(#_e){ font-family:var(--t-display)!important;font-variation-settings:normal!important;font-weight:400!important;font-style:normal!important; font-size:var(--t-m)!important;line-height:var(--t-lh-m)!important;letter-spacing:var(--t-track-m)!important;font-synthesis:none;text-wrap:balance} html body .company-story .cs-lead :is(span,div):not(#_t):not(#_y):not(#_p){font-family:inherit!important;font-variation-settings:inherit!important;font-size:inherit!important;letter-spacing:inherit!important} /* Text beside display titles and the quiet links take the text roles (they were 18 and 15). */ html body :is(.section-heading>p,.section-heading>p .rv-line):not(#_t):not(#_y):not(#_p):not(#_e){ font-family:var(--t-text)!important;font-size:var(--t-lead)!important;line-height:1.3!important;letter-spacing:0!important} html body :is(.about-support,.about-support .rv-line,.chapter-caption,#footer .footer-links>p,#footer .footer-links>div>a,#footer .footer-links>a.back-top):not(#_t):not(#_y):not(#_p):not(#_e){ font-size:var(--t-small)!important;line-height:1.4!important;letter-spacing:0!important} /* Services: at L the title needs the row; the line beside it drops under the title instead of being squeezed into a one-word column. */ html body #services .section-heading:not(#_t):not(#_y):not(#_p):not(#_e){flex-wrap:wrap!important;row-gap:20px} html body #services .section-heading>p:not(#_t):not(#_y):not(#_p):not(#_e){min-width:min(15em,100%)} /* Lead review, 20 Oct: the last display sizes outside the roles. The about statement (98, written by js/portfolio-v39.js) takes L in the display face; the gallery's scene heading (68) and practice notes (66) and the two cv headings the list missed (58) take M. */ html body .about-statement>p:not(#_t):not(#_y):not(#_p):not(#_e){ font-family:var(--t-display)!important;font-variation-settings:normal!important;font-weight:400!important;font-style:normal!important; font-size:var(--t-l)!important;line-height:var(--t-lh-l)!important;letter-spacing:var(--t-track-l)!important;font-kerning:normal;font-synthesis:none;text-wrap:balance} html body :is(.about-statement>p,.gallery-scene-heading>h2,.explore-practice-notes h3,#cv-recognition,#cv-workflow) :is(span,div):not(#_t):not(#_y):not(#_p){ font-family:inherit!important;font-variation-settings:inherit!important;font-style:inherit!important;font-size:inherit!important;letter-spacing:inherit!important} /* The rag (lead review, 20 Oct): paragraphs, list items and captions never end on a lone word. Display titles keep their authored lines. */ html body main :is(p,li,figcaption,dd,blockquote):not(#_t){text-wrap:pretty} /* the display statements run past the six lines Chrome balances: they take the rag's rule instead of balance */ html body :is(#about .about-intro>p[data-scroll-fill],.about-statement>p):not(#_t):not(#_y):not(#_p):not(#_e){text-wrap:pretty} /* ---------- The art pieces: the face, its tracking by size, no axes (21 Oct) ---------- */ /* The big numerals, the «10»'s caption, the ribbon's words, the station names, the ring's title and the page's name in the wipe took Archivo's axes ("wght" 400, "wdth" 98) and its -.055 to -.075em; the serif has no axes and wants a third of that tracking. The ribbon's canvas reads --ribbon-track (em of its 210 px letters: -.021 by the rule above). */ html body:not(#_t):not(#_y) :is(.years-digits,.experience-ten,.type-band-word){font-family:'Archivo Lens',Basel,serif!important} html body:not(#_t):not(#_y):not(#_p):not(#_e) :is( .years-digits,.experience-ten,.experience-caption,.type-band-word,.st-name,.wo-title,.block-wipe__name ){font-variation-settings:normal!important;font-weight:400!important;font-style:normal!important;font-synthesis:none!important;font-kerning:normal;letter-spacing:var(--t-track)!important} /* the page's name on the arrival sheet (js/portfolio-prepaint.js) is mounted on while does not exist yet, so the rule above cannot reach it: its inline -.055em was Archivo's */ html:not(#_t):not(#_y):not(#_p):not(#_e) .block-wipe-arrival .block-wipe__name{font-variation-settings:normal!important;font-weight:400!important;font-style:normal!important;font-synthesis:none!important;font-kerning:normal;letter-spacing:var(--t-track)!important} html body:not(#_t):not(#_y) .type-band-word{--ribbon-track:-.021} html body :is(h1,h2,h3){font-synthesis:none} /* the «10»: the gap between its two figures was Archivo's (.025em against -.055); the serif's 1 and 0 sit at its own fit and the size's tracking (.024em apart at 774 px) */ html body:not(#_t):not(#_y):not(#_p):not(#_e) .experience-ten{gap:0!important} /* The years' clock (js/chapters.js prints the year into four .yd slots and marks each with its digit, data-ch). The serif has proportional figures only (no tnum: 1 is .259em, 0 .478em), so with auto widths the centred year jumped when a digit changed (2019 → 2020: .2em, the whole number). Each slot now takes its digit's own advance plus the size's tracking (-.022em at 446 px) and moves to the next digit's width on `clear` while the digit reprints: the year re-centres in one glide. The slot clips only up and down (the odometer, ?odo=1), so the 1's thin side bearings are never cut. The first year stands at once (auto → a length does not animate). */ html body:not(#_t):not(#_y):not(#_p):not(#_e) .years-digits{letter-spacing:0!important} html body:not(#_t):not(#_y):not(#_p):not(#_e) .years-digits .yd{overflow:visible clip!important;padding-left:0!important;padding-right:0!important;min-width:0!important; grid-template-columns:minmax(0,1fr);justify-items:unsafe center;transition:width .7s cubic-bezier(.16,1,.3,1)} html body:not(#_t):not(#_y) .years-digits .yd-in{letter-spacing:0!important} html body:not(#_t):not(#_y):not(#_p) .years-digits .yd[data-ch="0"]{width:.456em} html body:not(#_t):not(#_y):not(#_p) .years-digits .yd[data-ch="1"]{width:.237em} html body:not(#_t):not(#_y):not(#_p) .years-digits .yd[data-ch="2"]{width:.398em} html body:not(#_t):not(#_y):not(#_p) .years-digits .yd[data-ch="3"]{width:.364em} html body:not(#_t):not(#_y):not(#_p) .years-digits .yd[data-ch="4"]{width:.387em} html body:not(#_t):not(#_y):not(#_p) .years-digits .yd[data-ch="5"]{width:.375em} html body:not(#_t):not(#_y):not(#_p) .years-digits .yd[data-ch="6"]{width:.398em} html body:not(#_t):not(#_y):not(#_p) .years-digits .yd[data-ch="7"]{width:.357em} html body:not(#_t):not(#_y):not(#_p) .years-digits .yd[data-ch="8"]{width:.428em} html body:not(#_t):not(#_y):not(#_p) .years-digits .yd[data-ch="9"]{width:.396em} html body:not(#_t):not(#_y):not(#_p) .years-digits .yd[data-ch=""]{width:0} @media (prefers-reduced-motion:reduce){html body:not(#_t):not(#_y):not(#_p):not(#_e) .years-digits .yd{transition:none}} /* The line masks round display lines (.text-mask: js/redesign.js; .tm-l: the years' and chapters' titles; .ym: the years' title; .cs-line: the about page's names and figures) were cut for Archivo's .18em descenders and its wide left bearings. The serif's descenders reach .224em, .078em under a line box of 1, and A, W, Y, J start left of their box: each mask now reaches .12em under the line and .06em to each side, given back by negative margins, so nothing moves. */ html body:not(#_t):not(#_y) .text-mask{padding:0 .06em .12em!important;margin:0 -.06em -.12em!important} html body:not(#_t):not(#_y) .tm-l{padding:0 .06em .16em!important;margin:0 -.06em -.16em!important} html body:not(#_t):not(#_y) .ym{padding:.04em .06em .12em!important;margin:0 -.06em -.12em!important} html body:not(#_t):not(#_y) .cs-line{padding-left:.06em!important;padding-bottom:.12em!important;margin-left:-.06em!important;margin-bottom:-.12em!important} /* Display paragraphs that js/motion/text-reveal.js splits into masked lines (SplitText's .rv-line-mask clips at the line box): the about statement (L, leading 1) lost .078em of every descender and the tips of an A, W or Y at a line's ends, the company line (M, 1.05) .053em. .1em under the line still hides a line waiting below it (it waits 105 % down, its ascenders .126em under the line box at L, .153em at M). */ html body:not(#_t):not(#_y) :is(.about-statement>p,.company-story .cs-lead) .rv-line-mask{padding:0 .06em .1em!important;margin:0 -.06em -.1em!important} /* -73 (24 Oct; Olya, on a phone: «на 3 экране скругления не те, следи за консистентностью» — /about's career covers at 12 px beside the DFINITY row's 8 px, the Fourmeta covers at 12-18 px, the case figures at 18-24 px): one radius for every picture, DESIGN.md `rounded.image` 10 px; panels keep 16 px, the frame 26 px (22 px on a phone), pills stay round. The years' chips are type-sized icons and keep theirs. Loaded last, so it wins over the older sheets' radii. hold18c's probe (tools/radiusprobe.cjs) added /about's battle film (24 px; the film inherits its screen's corner), the home's experience covers (12 px) and the chapters' related covers (14 px) */ :root{--r-image:10px} html body :is(.cr-shot img,.cs-case-cover,.cs-case-cover img,.rr-thumb,.rr-thumb img,.ab-fm .work-image,.ab-fm .work-image img,.ab-fm img, .ab-pass-lead,.ab-pass-lead img,.ab-pass-strip img,.work-card .work-image,.work-card .work-image img,.case-next-cover,.st-shot,.st-shot img, .series-shot>img,.series-shot>picture,.series-shot>picture img,.series-shot>video,.company-story figure img, .battle-stage>.battle-screen,.experience-project img,.chapter-related .work-image,.chapter-related .work-image img):not(#_r):not(#_s):not(#_t){border-radius:var(--r-image)!important} /* (QA-73 rows 6-7) the case's opening picture and its story frames took the cards' 20 px (css/portfolio-polish-v54.css:417), and the 13 openers of phones took none (css/case-space.css:20; the picture is a ground with the phones on it, so its corners showed square): both clip their pictures, so the corner is theirs */ html body.portfolio-case :is(.case-cover-art,.cs-frame):not(#_r):not(#_s):not(#_t){border-radius:var(--r-image)!important;overflow:hidden} /* ...and every case picture in a figure (id.ai's and Bilet's grids among them), so the screens' bezel follows one corner */ html body[data-page=case] main figure>img:not(#_r):not(#_s):not(#_t),html body[data-page=case] main figure>picture>img:not(#_r):not(#_s):not(#_t){border-radius:var(--r-image)!important} /* -73 (24 Oct; Olya, S16): the wordmark's d is the logo's d at the grotesk's weight (tools/wordmark-d2.py: the face's d, its stem ending at the bowl's centre): an inline svg on the baseline over the face's own d, which stays hidden and keeps the word's advance and tracking; the svg gives its width back. The footer's span rules (the ® size and lift) must not reach the two spans */ html body .footer-wordmark :is(.wm-d,.wm-d-glyph):not(#_w):not(#_x){display:inline;position:static;flex-shrink:1;font-size:1em;line-height:inherit;letter-spacing:inherit;margin:0;padding:0;vertical-align:baseline} html body .footer-wordmark .wm-d-glyph:not(#_w):not(#_x){visibility:hidden} html body .footer-wordmark .wm-d-mark:not(#_w){display:inline;width:.473em;height:.7em;margin:0 -.514em 0 .041em;vertical-align:-.012em;overflow:visible;fill:currentColor} /* (the second drawing, tools/wordmark-d2.py) the svg stands on the face d's own box, 41-514 by -12-688: the word's spacing and its optical margin (css/home-2026.css -.035em) are the face's again */ /* -73 (24 Oct; the coordinator's optional hand-off, judged in m5): as the footer's wordmark settles (js/portfolio-craft.js html.wm-settled) the corner d prints out through the Bayer cells, and prints back in when the footer leaves: the page opens and closes on the same d; the header never moves. Reduced motion keeps the corner d */ html.wm-settled .site-header .brand img{animation:wm-d-out .38s steps(1,end) both} html.wm-seen:not(.wm-settled) .site-header .brand img{animation:wm-d-in .38s steps(1,end) both} @media (prefers-reduced-motion:reduce){html.wm-settled .site-header .brand img,html.wm-seen .site-header .brand img{animation:none}} @keyframes wm-d-out{0%{-webkit-mask-image:none;mask-image:none;opacity:1}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-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;opacity:1}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-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;opacity:1}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-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;opacity:1}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-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;opacity:1}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-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;opacity:1}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-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;opacity:1}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-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;opacity:1}100%{opacity:0}} @keyframes wm-d-in{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;opacity:1}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;opacity:1}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;opacity:1}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;opacity:1}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;opacity:1}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;opacity:1}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;opacity:1}100%{-webkit-mask-image:none;mask-image:none;opacity:1}}