:root{--line-light:color-mix(in srgb, var(--muste) 14%, transparent);--f-sans:var(--f-mona-sans);--f-brand:var(--f-aldrich);--w-display:125%;--container:1240px;--gutter:clamp(1.25rem, .6rem + 2.6vw, 3rem)}*,:before,:after{box-sizing:border-box}body{background:var(--paperi);color:var(--muste);color-scheme:light;font-family:var(--f-sans);font-variant-ligatures:no-common-ligatures;-webkit-font-smoothing:antialiased;margin:0;font-size:1rem;line-height:1.6}h1,h2,p,figure,ul{margin:0}ul{padding:0;list-style:none}a{color:inherit}:focus-visible{outline:2px solid var(--signaali);outline-offset:3px}main :focus-visible{outline-color:var(--kupari)}main:focus{outline:none}.visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.container{width:min(100% - 2 * var(--gutter), var(--container));margin-inline:auto}.skip-link{z-index:100;background:var(--signaali);color:var(--signaali-teksti);padding:.6rem 1rem;font-weight:600;position:absolute;top:.5rem;left:.5rem;transform:translateY(-200%)}.skip-link:focus{transform:none}.top{--picker-bg:var(--pohja);background:var(--pohja);color:var(--teksti)}.concept-note{background:var(--paperi);color:var(--muste);text-align:center;padding-block:.45rem;font-size:.875rem}.concept-note a{color:var(--kupari);white-space:nowrap;font-weight:600;position:relative}.concept-note a:after{content:"";position:absolute;inset:-.75rem -.25rem}.concept-short{display:none}@media (width<=599px){.concept-note{text-align:left;font-size:.8125rem}.concept-long{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.concept-short{display:inline}}.top-inner{justify-content:space-between;align-items:center;gap:1.5rem;min-height:3rem;font-size:.875rem;display:flex}.back{white-space:nowrap;padding-block:.75rem;text-decoration:none;display:inline-block}.back:hover{text-decoration:underline}@media (width<=479px){.back-more{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}}.top .theme-name{color:var(--sumu);order:-1;margin:0 -.25rem 0 0}.pick{color:var(--kupari);font-weight:600}.intro{gap:1.25rem;padding-block:clamp(3rem,2rem + 4vw,6rem) 2rem;display:grid}h1{max-width:18ch;font-size:clamp(2.25rem,1.6rem + 2.8vw,4rem);font-stretch:var(--w-display);letter-spacing:-.02em;font-weight:700;line-height:1.04}.lead{max-width:62ch;color:var(--muste-2);font-size:1.125rem}.base{gap:.75rem;margin-top:1.5rem;display:grid}.base figcaption,.option-head p{max-width:62ch;color:var(--muste-2)}.base figcaption strong{color:var(--muste);font-weight:600}.panel{border-radius:2px;place-items:center;padding:clamp(1.5rem,1rem + 3vw,3.5rem);display:grid}.panel-ground{background:var(--pohja);color:var(--teksti)}.panel-paper{border:1px solid var(--line-light);background:var(--kortti);color:var(--muste)}.mark-grid{width:min(100%,44rem);height:auto}.mark-large{width:min(100%,26rem);height:auto}.option{border-top:1px solid var(--line-light);gap:1.5rem;padding-block:clamp(3rem,2rem + 3vw,5rem);display:grid}.option-head{gap:.5rem;display:grid}h2{font-size:clamp(1.75rem,1.4rem + 1.4vw,2.5rem);font-stretch:var(--w-display);letter-spacing:-.012em;font-weight:700;line-height:1.1}.stage{grid-template-columns:3fr 2fr;gap:1rem;display:grid}.context{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;display:grid}.mock{border-radius:2px;justify-content:space-between;align-items:center;gap:1rem;min-height:4rem;padding-inline:1.25rem;display:flex}.mock-ground{background:var(--pohja);color:var(--teksti)}.mock-paper{border:1px solid var(--line-light);background:var(--kortti);color:var(--muste)}.lockup{align-items:baseline;gap:.5rem;display:flex}.mark-header{width:auto;height:1rem;display:block}.lockup-sub{color:var(--sumu);font-size:.8125rem}.mock-paper .lockup-sub,.mock-paper .mock-nav{color:var(--muste-2)}.mock-nav{color:var(--sumu);gap:1.25rem;font-size:.875rem;font-weight:500;display:flex}.bottom{grid-template-columns:3fr 2fr;gap:1rem;display:grid}.services{background:var(--pohja);color:var(--teksti);border-radius:2px;align-content:center;gap:1.25rem;padding:1.5rem;display:grid}.service{align-items:baseline;gap:.625rem;display:flex}.mark-service{width:auto;height:1.25rem;display:block}.service span{font-family:var(--f-brand);letter-spacing:.05em;text-transform:uppercase;font-size:1.72rem;font-weight:400;line-height:1}.symbol{border:1px solid var(--line-light);background:var(--kortti);border-radius:2px;align-content:center;gap:1rem;padding:1.5rem;display:grid}.symbol figcaption{color:var(--muste-2);font-size:.875rem}.favicons{flex-wrap:wrap;align-items:flex-end;gap:1.5rem;display:flex}.favicon{color:var(--muste-2);justify-items:center;gap:.375rem;display:grid}.favicon-paper{color:var(--muste)}.favicon-paper .size{color:var(--muste-2)}.size{font-variant-numeric:tabular-nums;font-size:.75rem}.tile{display:block}.tile-16{width:16px;height:16px}.tile-32{width:32px;height:32px}.tile-64{width:64px;height:64px}.foot{background:var(--pohja);color:var(--sumu);padding-block:2.5rem;font-size:.875rem}.foot a{color:var(--teksti)}@media (width<=820px){.stage,.context,.bottom{grid-template-columns:minmax(0,1fr)}.mock-nav{display:none}}@media (width<=480px){.mark-service{height:1rem}.service span{font-size:1.375rem}}