* { margin:0; padding:0; font-synthesis: none; } html { } body { background-color: #f4f4f4; color: #111; font: 15px/22px 'Inter', system-ui, sans-serif; font-size: 15px; line-height: 1.5; letter-spacing: -0.004em; font-weight: 400; padding-bottom: 30px; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; font-kerning: normal; -webkit-font-kerning: normal; -ms-font-kerning: normal; -moz-font-kerning: normal; -o-font-kerning: normal; font-variant-ligatures: contextual common-ligatures; -webkit-font-variant-ligatures: contextual common-ligatures; -ms-font-variant-ligatures: contextual common-ligatures; -moz-font-variant-ligatures: contextual common-ligatures; -o-font-variant-ligatures: contextual common-ligatures; } /* Font style classifiers used by samples and dynmetrics */ /* Note: font-variation-settings is needed for Safari. */ .font-style-thin { font-variation-settings: "wght" 100, "slnt" 0 !important; font-weight:100 !important; font-style:normal !important; } .font-style-thin-italic { font-variation-settings: "wght" 100, "slnt" 100 !important; font-weight:100 !important; font-style:oblique !important; } .font-style-extra-light { font-variation-settings: "wght" 200, "slnt" 0 !important; font-weight:100 !important; font-style:normal !important; } .font-style-extra-light-italic { font-variation-settings: "wght" 200, "slnt" 100 !important; font-weight:100 !important; font-style:oblique !important; } .font-style-light { font-variation-settings: "wght" 300, "slnt" 0 !important; font-weight:300 !important; font-style:normal !important; } .font-style-light-italic { font-variation-settings: "wght" 300, "slnt" 100 !important; font-weight:300 !important; font-style:oblique !important; } .font-style-regular { font-variation-settings: "wght" 400, "slnt" 0 !important; font-weight:400 !important; font-style:normal !important; } .font-style-italic { font-variation-settings: "wght" 400, "slnt" 100 !important; font-weight:400 !importants; font-style:oblique !important; } .font-style-medium { font-variation-settings: "wght" 500, "slnt" 0 !important; font-weight:500 !important; font-style:normal !important; } .font-style-medium-italic { font-variation-settings: "wght" 500, "slnt" 100 !important; font-weight:500 !important; font-style:oblique !important; } .font-style-semi-bold { font-variation-settings: "wght" 600, "slnt" 0 !important; font-weight:600 !important; font-style:normal !important; } .font-style-semi-bold-italic { font-variation-settings: "wght" 600, "slnt" 100 !important; font-weight:600 !important; font-style:oblique !important; } .font-style-bold { font-variation-settings: "wght" 700, "slnt" 0 !important; font-weight:700 !important; font-style:normal !important; } .font-style-bold-italic { font-variation-settings: "wght" 700, "slnt" 100 !important; font-weight:700 !important; font-style:oblique !important; } .font-style-extra-bold { font-variation-settings: "wght" 800, "slnt" 0 !important; font-weight:800 !important; font-style:normal !important; } .font-style-extra-bold-italic { font-variation-settings: "wght" 800, "slnt" 100 !important; font-weight:800 !important; font-style:oblique !important; } .font-style-black { font-variation-settings: "wght" 900, "slnt" 0 !important; font-weight:900 !important; font-style:normal !important; } .font-style-black-italic { font-variation-settings: "wght" 900, "slnt" 100 !important; font-weight:900 !important; font-style:oblique !important; } @supports (font-variation-settings: normal) { body { font-family: 'Inter var', system-ui, sans-serif; } } :target:before { content:""; display: block; height: 20px; /* fixed header height*/ margin: -20px 0 0; /* negative fixed header height */ } a { text-decoration: underline rgba(0, 0, 0, 0.3); color: black; word-break: break-word; word-wrap: break-word; } a.fat { font-weight:500; color: #333; } a:hover { color: rgb(3, 102, 214); text-decoration: underline rgba(3, 102, 214, 0.6); } a.plain, a.fat { background: none; text-shadow: none; text-decoration: none; cursor: pointer; } a[href^="#"]:hover { text-decoration-style: dashed; } p { margin: 20px 0; } code, pre, q { font-family: "SFMono-Regular", Menlo, Consolas, Inconsolata, monospace; font-size:0.96em; } code { display: block; border-radius:1px; padding: 0.5em 0; overflow: auto; } pre, q { display: inline; white-space: pre-wrap; } q { display: inline; } q:before { content: ""; } q:after { content: ""; } kbd { -moz-font-feature-settings: 'kern' 1, 'case' 1; -ms-font-feature-settings: 'kern' 1, 'case' 1; -o-font-feature-settings: 'kern' 1, 'case' 1; -webkit-font-feature-settings: 'kern' 1, 'case' 1; font-feature-settings: 'kern' 1, 'case' 1; border: 1px solid rgba(0,0,0,0.18); border-radius: 3px; padding:0.1em 0.2em; margin:0 0.1em; } dem { /* de-emphasize */ font-weight: 400; opacity: 0.7; } num { /* number */ /*-moz-font-feature-settings: 'calt' 1, 'ss01' 1; -ms-font-feature-settings: 'calt' 1, 'ss01' 1; -o-font-feature-settings: 'calt' 1, 'ss01' 1; -webkit-font-feature-settings: 'calt' 1, 'ss01' 1; font-feature-settings: 'calt' 1, 'ss01' 1;*/ letter-spacing:0.01em; white-space: pre; } em, i, .italic { font-style: oblique; } small { font-size: 11px; letter-spacing: 0.012em; } h1, h2, h3 { font-weight: 500; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1 { color: #222; font-size: 55px; letter-spacing: -0.038em; line-height: 1.1em; text-indent: -2px; margin-bottom: 30px; margin-top: 10px; font-weight: 700; } h2 { font-size: 30px; font-weight: 600; letter-spacing: -0.025em; line-height: 30px; margin-bottom: 25px; margin-top: 10px; } .row.dark h2, .row.black h2 { letter-spacing: -0.014em; } h2.back { color:rgba(0,0,0,0.2); font-size: inherit; letter-spacing: inherit; font-weight:400; margin:0; margin-top:-1.9em; } h2.back a:hover { color: black; margin-left:-1.3em; } h2.back a:hover::before { content: "<- "; } h2.banner { text-align: center; display: flex; justify-content: center; } h2.banner > * { flex: 0 1 auto; padding: 0.8em 1.2em; border-radius: 4em; display: block; background: white; } h2.banner > a:hover { color: black; background: rgba(0,0,0,0.1); } h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; } .row.dark h3, .row.black h3 { letter-spacing: -0.012em; } h3 q { font-weight: 400; padding-left: 0.5em; } h1 > a, h2 > a, h3 > a { color: inherit; text-decoration: none !important; text-shadow: none; background: none; } .row { padding: 50px; display: flex; justify-content: center; } .row > * { width:100%; max-width: 888px; flex: 1 0 100%; } .row .learn-more { margin-top: 2em; text-align: center; font-size: 11px; letter-spacing: 0.007em; } .row .learn-more a { color: rgba(0,0,0,0.4); text-decoration-color: rgba(0, 0, 0, 0); } .row .learn-more a:hover { color: inherit; } .row.full-width { padding: 50px 0; justify-content: flex-start; } .row.full-width > * { max-width: initial; } .row-divider { margin:0 auto; max-width: 888px; height: 1px; border-bottom: 1px dashed rgba(0,0,0,0.09); } .row.menu { padding: 0; border-bottom:1px solid rgba(0,0,0,0.1); } .row.menu ul { width: auto; max-width: 888px; flex: 1 1 auto; list-style: none; padding: 0; margin: 0 50px; display: flex; flex-wrap: wrap; white-space: nowrap; } .row.menu ul li { margin-right: 50px; margin-bottom: -1px; text-indent: -0.5px; } .row.menu ul li > a { color: inherit; opacity: 0.6; text-decoration:none; display: inline-block; padding: 15px 0 13px 0; transition: 300ms opacity cubic-bezier(0.25, 0.47, 0.44, 0.93); border-bottom: 3px solid transparent; } .row.menu ul li > a:hover, .row.menu ul li > a.active { color: black; border-bottom-color: black; opacity: 1; } .row.menu ul li.home > a { font-weight: 500; color: black; opacity: 1; } .row.white { background: white; } .row.dark, .row.black { background: #2b2b2b; color: #99999b; } .row.black { background: #010101; } .row.dark a, .row.black a { text-decoration-color: rgba(255, 255, 255, 0.2); color: #aaa; } .row.dark a:hover, .row.black a:hover { color: rgb(95, 170, 255); text-decoration: underline rgb(95, 170, 255); } .row.dark h2, .row.dark h2 > a, .row.black h2, .row.black h2 > a { color: #ccc; background: none; } .row.color1 { background: #C0CDE2; color: #3B414A; } /* --------------------------------------------------------------------- */ ul { margin-left:1.1em; } a > img { display: block; } /* --------------------------------------------------------------------- */ /* generic helpers */ .low-contrast { opacity: 0.4; } .center-text { text-align: center; } /* --------------------------------------------------------------------- */ #repertoire-image { display:block; width:100%; height:40vw; background-image: url(res/repertoire.png); background-repeat: no-repeat; background-size: cover; background-blend-mode: multiply; background-color: #f4f4f4; } .sample-images {} .sample-images img, .sample-images svg { display: block; width: 100%; } /* --------------------------------------------------------------------- */ tablex { display: flex; } tablex > t { display: table; } tablex > t > h { display: table-row; opacity:0.4; } tablex > t > h > * { padding-bottom:1em; } tablex > t > h to { visibility: hidden; } tablex > t > r { text-decoration: none; display: table-row; } /* --------------------------------------------------------------------- */ /* grid with 4 major columns subdivided twice | | | | | | 1 | 2 | 3 | 4 | | | | | | | | | | | | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | | | | | | | | | | | | | | | | | | | | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | */ .row.features { display:none; } @supports (display: grid) { .row.features { display:flex; } } .row.features p.example { margin-top:2rem; opacity:0.4; } grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-column-gap: 1rem; grid-row-gap: 1rem; } grid.c4 { grid-template-columns: repeat(4, 1fr); } grid.c8 { grid-template-columns: repeat(8, 1fr); } grid.c9 { grid-template-columns: repeat(9, 1fr); } grid.c16 { grid-template-columns: repeat(16, 1fr); } /*grid, grid4 { grid-template-columns: repeat(4, 1fr); }*/ c { display: block; grid-column-end: span 1; } c[start="1"] { grid-column-start: 1; } c[start="2"] { grid-column-start: 2; } c[start="3"] { grid-column-start: 3; } c[start="4"] { grid-column-start: 4; } c[start="5"] { grid-column-start: 5; } c[start="6"] { grid-column-start: 6; } c[start="7"] { grid-column-start: 7; } c[start="8"] { grid-column-start: 8; } c[start="9"] { grid-column-start: 9; } c[span="1"] { grid-column-end: span 1; } c[span="2"] { grid-column-end: span 2; } c[span="3"] { grid-column-end: span 3; } c[span="4"] { grid-column-end: span 4; } c[span="5"] { grid-column-end: span 5; } c[span="6"] { grid-column-end: span 6; } c[span="7"] { grid-column-end: span 7; } c[span="8"] { grid-column-end: span 8; } c[span="9"] { grid-column-end: span 9; } c[span="1-1"] { grid-column: 1 / 1; } c[span="2-5"] { grid-column: 2 / 5; } c[span="2-4"] { grid-column: 2 / 4; } grid.c4 c[span="2..."], c[span="2.."] { grid-column: 2 / 5; } grid.c8 c[span="2..."], c[span="2.."] { grid-column: 2 / 9; } /* .debug can be added to a grid to visualize its effective cells. .debug-color applies alternating colors. */ grid.debug > *, grid.debug-color > * { --color: rgba(250, 230, 0, 0.2); background-image: linear-gradient(to bottom, var(--color) 0%, var(--color) 100%); } grid.debug > :nth-child(4n+2) { --color: rgba(250, 0, 0, 0.1); } grid.debug > :nth-child(4n+3) { --color: rgba(40, 120, 255, 0.1); } grid.debug > :nth-child(4n+4) { --color: rgba(0, 230, 80, 0.17); } .col-all { grid-column: 1 / span 16; } .col-1 { grid-column: 1 / span 2; } .col-1-2 { grid-column: 1 / span 4; } .col-1-3 { grid-column: 1 / span 6; } .col-1-4 { grid-column: 1 / span 8; } .col-1-5 { grid-column: 1 / span 10; } .col-1-6 { grid-column: 1 / span 12; } .col-1-7 { grid-column: 1 / span 14; } .col-1-8 { grid-column: 1 / span 16; } .col-2 { grid-column: 2 / span 2; } .col-2-2 { grid-column: 2 / span 4; } .col-2-3 { grid-column: 2 / span 6; } .col-2-4 { grid-column: 2 / span 8; } .col-2-5 { grid-column: 2 / span 10; } .col-2-6 { grid-column: 2 / span 12; } .col-2-7 { grid-column: 2 / span 14; } .col-3 { grid-column: 3 / span 2; } .col-3-2 { grid-column: 3 / span 4; } .col-3-3 { grid-column: 3 / span 6; } .col-3-4 { grid-column: 3 / span 8; } .col-3-5 { grid-column: 3 / span 10; } .col-3-6 { grid-column: 3 / span 12; } .col-4 { grid-column: 4 / span 2; } .col-4-2 { grid-column: 4 / span 4; } .col-4-3 { grid-column: 4 / span 6; } .col-4-4 { grid-column: 4 / span 8; } .col-4-5 { grid-column: 4 / span 10; } .col-5 { grid-column: 5 / span 2; } .col-5-2 { grid-column: 5 / span 4; } .col-5-3 { grid-column: 5 / span 6; } .col-5-4 { grid-column: 5 / span 8; } .col-6 { grid-column: 6 / span 2; } .col-6-2 { grid-column: 6 / span 4; } .col-6-3 { grid-column: 6 / span 6; } .col-7 { grid-column: 7 / span 2; } .col-7-2 { grid-column: 7 / span 4; } .col-8 { grid-column: 8 / span 2; } /* --------------------------------------------------------------------- */ boxes { display: flex; flex-wrap: wrap; justify-content: stretch; margin-right:-1em; } box { overflow: auto; flex: 1 1 0; min-width: 280px; max-width: 100%; display: flex; flex-direction: column; background: white; padding: 2em; border-radius: 3px; margin-right:1em; margin-bottom:1em; } body.safari box { /* Fix for broken flex wrap in safari */ flex-basis: 40%; } box:first-child { margin-left:0; } box h3 { margin-bottom:0.8em; } box.large tablex r { line-height: 1.5; } box.large tablex r in, box.large tablex r to, box.large tablex r out { font-size: 2rem; padding-bottom: 0; } #hud-notification { position: fixed; bottom: 20px; left: 0; right: 0; display: flex; justify-content: center; z-index: 9; pointer-events: none; } #hud-notification .msg { background: #000; color: white; height: 50px; line-height: 50px; font-size: 22px; letter-spacing: -0.012em; padding: 0 0.7em; border-radius: 4px; opacity: 0.1; transition: 250ms all ease-in; transform: translate3d(0, 71px, 0); /* height + bottom offset + 1 */ } #hud-notification.visible .msg { transform: translate3d(0, 0, 0); transition: 120ms all cubic-bezier(0.25, 0.47, 0.44, 0.93); opacity: 1; } /* ------------------------------------------------------ */ /* wide windows */ @media only screen and (min-width: 566px) { .narrow-window { display: none; } } /* narrow windows */ @media only screen and (max-width: 565px) { .wide-window { display: none; } .row.menu ul { justify-content: space-between; } .row.menu ul li { margin-right: 15px; } .row.menu ul li:last-child { margin-right: 0; } .row.menu ul li.home { /*color: red; clear: both;*/ /*display: block;*/ text-align:center; margin:0 0 -12px 0; width: 100%; } .row.menu ul li.home > a { border-bottom: none; padding: 0 1em; margin: 0.5em 0; line-height:34px; border-radius: 90px; /*color: white; background-color: rgba(3, 102, 214, 1);*/ } .row.menu ul li.home > a:hover { color: white; background-color: #222; } } /* small devices (<= iPhone 6+) */ @media only screen and (max-device-width: 414px) { box { padding: 1em; } box tablex r { font-size: 0.9em; } body { font-size: 14px; line-height: 20px; } .row { padding-left: 20px; padding-right: 20px; } .row.menu ul { margin-left: 20px; margin-right: 20px; } } /* small devices (<= iPhone 5) */ @media only screen and (max-device-width: 320px) { box { font-size: 0.8em; min-width: 240px; } /*.row.menu { font-size:13px; } .row.menu ul { margin-left: 0; margin-right: 0; } .row.menu ul li { flex: 1 0 auto; text-align: center; border-right: 1px solid rgba(0,0,0,0.1); margin-left:0; margin-right:0; } .row.menu ul li:last-child { border-right: none; }*/ } /* Feature helpers. Note: font-variant-alternates:character-variant is not yet supported by most browsers, which is why we use the "low leve" font-feature-settings instead. */ .ff-none { font-feature-settings: 'calt' 0, 'liga' 0; -webkit-font-feature-settings: 'calt' 0, 'liga' 0; -ms-font-feature-settings: 'calt' 0, 'liga' 0; -moz-font-feature-settings: 'calt' 0, 'liga' 0; } .ff-dlig { font-feature-settings: 'dlig' 1; -webkit-font-feature-settings: 'dlig' 1; -ms-font-feature-settings: 'dlig' 1; -moz-font-feature-settings: 'dlig' 1; } .ff-numr { font-feature-settings: 'numr' 1; -webkit-font-feature-settings: 'numr' 1; -ms-font-feature-settings: 'numr' 1; -moz-font-feature-settings: 'numr' 1; } .ff-dnom { font-feature-settings: 'dnom' 1; -webkit-font-feature-settings: 'dnom' 1; -ms-font-feature-settings: 'dnom' 1; -moz-font-feature-settings: 'dnom' 1; } .ff-tnum { font-feature-settings: 'tnum' 1; -webkit-font-feature-settings: 'tnum' 1; -ms-font-feature-settings: 'tnum' 1; -moz-font-feature-settings: 'tnum' 1; } .ff-case { font-feature-settings: 'case' 1; -webkit-font-feature-settings: 'case' 1; -ms-font-feature-settings: 'case' 1; -moz-font-feature-settings: 'case' 1; } .ff-zero { font-feature-settings: 'zero' 1; -webkit-font-feature-settings: 'zero' 1; -ms-font-feature-settings: 'zero' 1; -moz-font-feature-settings: 'zero' 1; } .ff-frac { font-feature-settings: 'frac' 1; -webkit-font-feature-settings: 'frac' 1; -ms-font-feature-settings: 'frac' 1; -moz-font-feature-settings: 'frac' 1; } .ff-sups { font-feature-settings: 'sups' 1; -webkit-font-feature-settings: 'sups' 1; -ms-font-feature-settings: 'sups' 1; -moz-font-feature-settings: 'sups' 1; } .ff-subs { font-feature-settings: 'subs' 1; -webkit-font-feature-settings: 'subs' 1; -ms-font-feature-settings: 'subs' 1; -moz-font-feature-settings: 'subs' 1; } .ff-cpsp { font-feature-settings: 'cpsp' 1; -webkit-font-feature-settings: 'cpsp' 1; -ms-font-feature-settings: 'cpsp' 1; -moz-font-feature-settings: 'cpsp' 1; } .ff-salt { font-feature-settings: 'salt' 1; -webkit-font-feature-settings: 'salt' 1; -ms-font-feature-settings: 'salt' 1; -moz-font-feature-settings: 'salt' 1; } .ff-salt-zero { font-feature-settings: 'salt' 1, 'zero' 1; } .ff-cv07-salt-zero { font-feature-settings: 'cv07' 1, 'salt' 1, 'zero' 1; } .ff-ss01 { font-feature-settings: 'ss01' 1; -webkit-font-feature-settings: 'ss01' 1; -ms-font-feature-settings: 'ss01' 1; -moz-font-feature-settings: 'ss01' 1; } .ff-ss02 { font-feature-settings: 'ss02' 1; -webkit-font-feature-settings: 'ss02' 1; -ms-font-feature-settings: 'ss02' 1; -moz-font-feature-settings: 'ss02' 1; } .ff-cv01 { font-feature-settings: 'cv01' 1; -webkit-font-feature-settings: 'cv01' 1; -ms-font-feature-settings: 'cv01' 1; -moz-font-feature-settings: 'cv01' 1; } .ff-cv02 { font-feature-settings: 'cv02' 1; -webkit-font-feature-settings: 'cv02' 1; -ms-font-feature-settings: 'cv02' 1; -moz-font-feature-settings: 'cv02' 1; } .ff-cv03 { font-feature-settings: 'cv03' 1; -webkit-font-feature-settings: 'cv03' 1; -ms-font-feature-settings: 'cv03' 1; -moz-font-feature-settings: 'cv03' 1; } .ff-cv04 { font-feature-settings: 'cv04' 1; -webkit-font-feature-settings: 'cv04' 1; -ms-font-feature-settings: 'cv04' 1; -moz-font-feature-settings: 'cv04' 1; } .ff-cv05 { font-feature-settings: 'cv05' 1; -webkit-font-feature-settings: 'cv05' 1; -ms-font-feature-settings: 'cv05' 1; -moz-font-feature-settings: 'cv05' 1; } .ff-cv06 { font-feature-settings: 'cv06' 1; -webkit-font-feature-settings: 'cv06' 1; -ms-font-feature-settings: 'cv06' 1; -moz-font-feature-settings: 'cv06' 1; } .ff-cv07 { font-feature-settings: 'cv07' 1; -webkit-font-feature-settings: 'cv07' 1; -ms-font-feature-settings: 'cv07' 1; -moz-font-feature-settings: 'cv07' 1; } .ff-cv08 { font-feature-settings: 'cv08' 1; -webkit-font-feature-settings: 'cv08' 1; -ms-font-feature-settings: 'cv08' 1; -moz-font-feature-settings: 'cv08' 1; } .ff-cv09 { font-feature-settings: 'cv09' 1; -webkit-font-feature-settings: 'cv09' 1; -ms-font-feature-settings: 'cv09' 1; -moz-font-feature-settings: 'cv09' 1; } .ff-cv10 { font-feature-settings: 'cv10' 1; -webkit-font-feature-settings: 'cv10' 1; -ms-font-feature-settings: 'cv10' 1; -moz-font-feature-settings: 'cv10' 1; }