@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/assets/fonts/manrope-cyrillic-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/assets/fonts/manrope-cyrillic-wght-normal.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/assets/fonts/manrope-greek-wght-normal.woff2") format("woff2"); unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/assets/fonts/manrope-vietnamese-wght-normal.woff2") format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/assets/fonts/manrope-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/assets/fonts/manrope-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-cyrillic-ext-400-normal.woff2") format("woff2"); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-cyrillic-400-normal.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-vietnamese-400-normal.woff2") format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-cyrillic-ext-500-normal.woff2") format("woff2"); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-cyrillic-500-normal.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-vietnamese-500-normal.woff2") format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }


:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --bg2: #f4f4f1;
  --label: #16231c;
  --label2: #55524a;
  --separator: rgba(22, 35, 28, .16);
  --tint: #145c47;
  --tint-fill: #145c47;
  --on-tint: #ffffff;
  --nav: rgba(255, 255, 255, .72);
  --todo-fill: #fbe3cc;
  --todo: #6a3a12;
  --accent: #a85a24;
  --sketch: #145c47;
  --wash: #fdf1e2;
  --sky1: #d9e8ee;
  --sky2: #eef0e6;
  --sky3: #fae5cc;
  --sky4: #f6cfa6;
  --bar: rgba(236, 234, 228, .94);
  --bar-hover: #dcebe3;
  --bar-current: #cfe3d9;
  --bar-ink: #145c47;
  --bar-fill: #a8dcc6;
  --bar-text: #16231c;
  --p-far: #c5d9d4;
  --p-mid: #9dc2ad;
  --p-snow: #ffffff;
  --p-hill: #b4d6a3;
  --p-hill2: #cbe2ad;
  --p-water: #a9d4e0;
  --p-tree: #5c9d78;
  --p-leaf: #8fc78f;
  --p-trunk: #8a6a4b;
  --p-door: #5a4537;
  --p-glow: #ffe3a8;
  --p-white: #fbf7ef;
  --p-moon: #f3e7c8;
  --p-shade: #7eab93;
  --p-far2: #b6cdc7;
  --p-front1: #9fc89f;
  --p-front2: #84b38c;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c2026;
    --bg2: #172a30;
    --label: #f2f5f3;
    --label2: #aeb6b1;
    --separator: rgba(242, 245, 243, .18);
    --tint: #5cc9a0;
    --tint-fill: #1f7a5c;
    --nav: rgba(12, 32, 38, .72);
    --todo-fill: #3a2e1a;
    --todo: #ffb340;
    --accent: #f2b98d;
    --sketch: #9fd8bf;
    --wash: #12333d;
    --sky1: #08131f;
    --sky2: #0c1c2e;
    --sky3: #132a40;
    --sky4: #1d3953;
    --bar: rgba(23, 42, 48, .94);
    --bar-hover: #21414a;
    --bar-current: #1f5a4a;
    --bar-ink: #b9ecd6;
    --bar-fill: #2f7a62;
    --bar-text: #f2f5f3;
    --p-far: #1d3f49;
    --p-mid: #27565a;
    --p-snow: #cfe0dc;
    --p-hill: #235349;
    --p-hill2: #1e4840;
    --p-water: #24606f;
    --p-tree: #3f9a78;
    --p-leaf: #4fae85;
    --p-trunk: #7a6248;
    --p-door: #f2b98d;
    --p-glow: #ffd98f;
    --p-white: #d9e3de;
    --p-moon: #f3e7c8;
    --p-shade: #1f474b;
    --p-far2: #183843;
    --p-front1: #1f4b40;
    --p-front2: #183f35;
  }
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0c2026;
  --bg2: #172a30;
  --label: #f2f5f3;
  --label2: #aeb6b1;
  --separator: rgba(242, 245, 243, .18);
  --tint: #5cc9a0;
  --tint-fill: #1f7a5c;
  --nav: rgba(12, 32, 38, .72);
  --todo-fill: #3a2e1a;
  --todo: #ffb340;
  --accent: #f2b98d;
  --sketch: #9fd8bf;
  --wash: #12333d;
  --sky1: #08131f;
  --sky2: #0c1c2e;
  --sky3: #132a40;
  --sky4: #1d3953;
  --bar: rgba(23, 42, 48, .94);
  --bar-hover: #21414a;
  --bar-current: #1f5a4a;
  --bar-ink: #b9ecd6;
  --bar-fill: #2f7a62;
  --bar-text: #f2f5f3;
  --p-far: #1d3f49;
  --p-mid: #27565a;
  --p-snow: #cfe0dc;
  --p-hill: #235349;
  --p-hill2: #1e4840;
  --p-water: #24606f;
  --p-tree: #3f9a78;
  --p-leaf: #4fae85;
  --p-trunk: #7a6248;
  --p-door: #f2b98d;
  --p-glow: #ffd98f;
  --p-white: #d9e3de;
  --p-moon: #f3e7c8;
  --p-shade: #1f474b;
  --p-far2: #183843;
  --p-front1: #1f4b40;
  --p-front2: #183f35;
}

@media (prefers-contrast: more) {
  :root {
    --label: #000000;
    --label2: #2f2f2b;
    --separator: rgba(0, 0, 0, .5);
    --tint: #0b4634;
    --tint-fill: #0b4634;
    --nav: #ffffff;
  }
}

@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000;
    --bg2: #14241f;
    --label: #ffffff;
    --label2: #dfe5e1;
    --separator: rgba(255, 255, 255, .55);
    --tint: #8ce6c3;
    --tint-fill: #1f7a5c;
    --nav: #000000;
  }
}

@media (prefers-contrast: more) {
  :root[data-theme="dark"] {
    --bg: #000000;
    --bg2: #14241f;
    --label: #ffffff;
    --label2: #dfe5e1;
    --separator: rgba(255, 255, 255, .55);
    --tint: #8ce6c3;
    --tint-fill: #1f7a5c;
    --nav: #000000;
  }
}

* { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--label);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Noto Sans", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.47;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
a { color: var(--tint); text-underline-offset: .15em; }
a:active, summary:active, .button:active { opacity: .6; }
:focus-visible { outline: 3px solid var(--tint); outline-offset: 2px; border-radius: 4px; }
img, svg { max-width: 100%; }
h1, h2, h3, h4, p, ul, ol { margin: 0; }
h1, h2, h3, h4 { font-weight: 600; }

.skip { position: absolute; inset-inline-start: -999px; top: .5rem; z-index: 20; padding: .75rem 1rem; border-radius: .5rem; background: var(--bg); }
.skip:focus { inset-inline-start: .5rem; }
.wrap { width: 100%; max-width: 61.25rem; margin: 0 auto; padding-left: 1.25rem; padding-right: 1.25rem; }


.navbar {
  position: sticky; top: 0; z-index: 10;
  background: var(--nav);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
.home .navbar { position: fixed; top: 0; left: 0; right: 0; }
.sitenav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.25rem; }
.brand { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; color: var(--label); text-decoration: none; font-weight: 600; }
.brand img { width: 1.75rem; height: 1.75rem; border-radius: .4rem; }
.sitenav { flex-wrap: wrap; }
.navlinks { display: flex; gap: 1.5rem; }
.navlink { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--label); text-decoration: none; font-size: .9375rem; }
.navlink:hover { color: var(--tint); }
.navlink[aria-current=page] { font-weight: 600; }
.navtools { display: flex; align-items: center; gap: .75rem; }
.themeswitch { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: none; color: var(--label); cursor: pointer; }
.themeswitch[hidden] { display: none; }
.themeswitch svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }
.themeswitch .iconsun, .themeswitch[aria-pressed="true"] .iconmoon { display: none; }
.themeswitch[aria-pressed="true"] .iconsun { display: block; }
.menu { display: none; position: relative; }
.menu summary { display: flex; align-items: center; min-height: 2.75rem; padding: 0 .25rem; cursor: pointer; list-style: none; color: var(--tint); font-size: .9375rem; }
.menu summary::-webkit-details-marker { display: none; }
.menu[open] .menulist { display: flex; }
.menulist { position: absolute; inset-inline-end: 0; top: 100%; display: none; flex-direction: column; min-width: 13rem; padding: .25rem 1rem; border-radius: .75rem; background: var(--bg2); box-shadow: 0 .5rem 2rem rgba(0, 0, 0, .18); }
.menulist a + a { border-top: 1px solid var(--separator); }


.herotitle, .pagehead h1, .article h1 { font-weight: 700; letter-spacing: -.022em; line-height: 1.08; }
.herotitle { font-size: clamp(2.5rem, 7vw, 4rem); }
.pagehead h1 { font-size: clamp(2.125rem, 5vw, 3rem); }
.article h1 { font-size: clamp(2rem, 4.5vw, 2.5rem); }
.block h2, .grouptitle, .sectiontitle { font-size: 1.75rem; line-height: 1.18; letter-spacing: -.014em; }
.article h2 { margin-top: 2.25rem; margin-bottom: .75rem; font-size: 1.375rem; line-height: 1.22; letter-spacing: -.01em; }
.eyebrow { margin-bottom: .5rem; font-size: 1.0625rem; font-weight: 600; color: var(--tint); }
.intro, .lede, .herosub { color: var(--label2); font-size: 1.25rem; line-height: 1.35; letter-spacing: -.005em; }
.intro, .lede { margin-top: .75rem; max-width: 42rem; }
.caption { color: var(--label2); font-size: .875rem; line-height: 1.4; }


.hero { position: relative; overflow: hidden; background: linear-gradient(to bottom, var(--sky1) 0, var(--sky2) 34%, var(--sky3) 66%, var(--sky4) 100%); }
.herotext { position: relative; padding-top: 6.5rem; text-align: center; }
.herotitle { margin: 0 auto; max-width: 54rem; }
.herosub { margin: 1.125rem auto 0; max-width: 35rem; color: var(--label); }
.heroactions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem 1.25rem; align-items: center; margin-top: 1.625rem; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 1.5rem; border-radius: .875rem; background: var(--tint-fill); color: var(--on-tint); font-weight: 600; text-decoration: none; }
.button:hover { color: var(--on-tint); }
.availability { color: var(--label); }
.promise { margin-top: 1rem; color: var(--label); }
.herostage { position: relative; margin-top: 3rem; padding-bottom: 3rem; }
.herosketch { position: absolute; left: 0; right: 0; bottom: 0; display: block; width: 100%; height: 28.75rem; overflow: visible; }
.herophone { position: relative; width: 18.75rem; max-width: calc(100% - 2rem); margin: 0 auto; }
.phone { width: 100%; max-width: 18.75rem; margin: 0 auto; padding: .5625rem; border-radius: 3.125rem; background: #10171a; box-shadow: 0 1.5rem 3.75rem rgba(14, 40, 40, .22); }
.phone img { display: block; width: 100%; height: auto; border-radius: 2.5625rem; }
.patternscreen { display: block; width: 100%; height: auto; border-radius: 2.5625rem; }
.line { fill: none; stroke: var(--sketch); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sun { stroke: #e38a4d; }

.p-far { fill: var(--p-far); stroke: none; }
.p-mid { fill: var(--p-mid); stroke: none; }
.p-snow { fill: var(--p-snow); stroke: none; }
.p-hill { fill: var(--p-hill); stroke: none; }
.p-hill2 { fill: var(--p-hill2); stroke: none; }
.p-water { fill: var(--p-water); stroke: none; }
.f-tree, .line .f-tree { fill: var(--p-tree); }
.f-leaf, .line .f-leaf { fill: var(--p-leaf); }
.f-hill, .line .f-hill { fill: var(--p-hill); }
.f-mid, .line .f-mid { fill: var(--p-mid); }
.f-water, .line .f-water { fill: var(--p-water); }
.f-trunk, .line .f-trunk { fill: var(--p-trunk); }
.f-door, .line .f-door { fill: var(--p-door); }
.f-glow, .line .f-glow { fill: var(--p-glow); }
.f-white, .line .f-white { fill: var(--p-white); }
.f-moon, .line .f-moon { fill: var(--p-moon); }
.p-beam { fill: var(--p-glow); fill-opacity: .4; stroke: none; }
.line .f-sun { fill: #f2a06b; }
.trunk { fill: none; }
.p-shade { fill: var(--p-shade); stroke: none; }
.p-far2 { fill: var(--p-far2); stroke: none; }
.p-front1 { fill: var(--p-front1); stroke: none; }
.p-front2 { fill: var(--p-front2); stroke: none; }
.herosketch .faredge { stroke-opacity: .45; }
.herosketch .ripple { stroke-opacity: .7; }
.herosketch .glint { stroke: var(--p-white); }
.herosketch .nightsky { display: none; }
.herosketch .star { fill: #c9d6d1; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .herosketch .nightsky { display: inline; }
  :root:not([data-theme="light"]) .herosketch .sun { display: none; }
}
:root[data-theme="dark"] .herosketch .nightsky { display: inline; }
:root[data-theme="dark"] .herosketch .sun { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .herosketch .draw { stroke-dasharray: 1 1; animation: sketchdraw 3.6s ease-in-out both; }
  .herosketch .draw2 { stroke-dasharray: 1 1; animation: sketchdraw 3s ease-in-out .9s both; }
  .herosketch .paint { animation: paintin 2.4s ease-out 1.1s both; }
  .herosketch .sun { animation: sunrise 7s cubic-bezier(.2, .7, .2, 1) both; }
  .herosketch .drift { animation: birddrift 16s ease-in-out 2s infinite alternate; }
  .herosketch .sway, .herosketch .sway2 { transform-box: fill-box; transform-origin: 50% 100%; animation: treesway 6s ease-in-out infinite alternate; }
  .herosketch .sway2 { animation-duration: 7.5s; animation-delay: -2s; }
  .herosketch .flow { animation: waterflow 10s ease-in-out infinite alternate; }
  .herosketch .flow2 { animation: waterflow 13s ease-in-out infinite alternate-reverse; }
  .herosketch .flow3 { animation: waterflow 17s ease-in-out -4s infinite alternate; }
  .herosketch .ripple { animation: ripple 6s ease-in-out infinite; }
  .herosketch .glint { animation: glint 3s ease-in-out infinite; }
  .herosketch .star { animation: herotwinkle 3s ease-in-out infinite alternate; }
  .herosketch .moonrise { animation: sunrise 7s cubic-bezier(.2, .7, .2, 1) both; }
  .herosketch.still *, .herosketch.away * { animation-play-state: paused; }
}
@keyframes sketchdraw { from { stroke-dashoffset: 1; opacity: 0; } 2% { opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes paintin { from { opacity: 0; } to { opacity: 1; } }
@keyframes sunrise { from { transform: translateY(190px); } to { transform: translateY(0); } }
@keyframes birddrift { from { transform: translate(0, 0); } to { transform: translate(90px, -18px); } }
@keyframes treesway { from { transform: rotate(-1.6deg); } to { transform: rotate(1.6deg); } }
@keyframes waterflow { from { transform: translateX(-22px); } to { transform: translateX(22px); } }
@keyframes ripple { 0% { opacity: 0; transform: translateX(-8px); } 45% { opacity: 1; } 100% { opacity: 0; transform: translateX(8px); } }
@keyframes glint { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
@keyframes herotwinkle { from { opacity: 1; } to { opacity: .2; } }
.sketchpause { position: absolute; inset-inline-end: 1rem; top: -2.75rem; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: none; color: var(--sketch); cursor: pointer; }
.sketchpause[hidden] { display: none; }
.sketchpause svg { box-sizing: content-box; width: .875rem; height: .875rem; padding: .4375rem; border: 1px solid currentColor; border-radius: 50%; fill: currentColor; }
.sketchpause .iconplay, .sketchpause[aria-pressed="true"] .iconpause { display: none; }
.sketchpause[aria-pressed="true"] .iconplay { display: block; }


.feature { position: relative; overflow: hidden; }
.sketch { position: absolute; left: 0; right: 0; bottom: 0; display: block; width: 100%; height: 15rem; overflow: visible; }
.inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 18.75rem; gap: 2.5rem 5rem; align-items: center; padding-top: 5.5rem; padding-bottom: 8rem; }
.flip .inner > :first-child { order: 2; }
.name { display: flex; align-items: center; gap: .625rem; margin-bottom: .875rem; font-weight: 600; color: var(--accent); }
.name svg { width: 1.875rem; height: 1.875rem; }
.feature h1, .feature h2 { margin-bottom: .875rem; font-size: clamp(2.25rem, 5vw, 3.5rem); line-height: 1.05; font-weight: 700; letter-spacing: -.025em; }
.feature p:not(.name) { max-width: 29rem; color: var(--label2); font-size: 1.25rem; line-height: 1.4; }
.feature .know { margin-top: 1rem; font-size: .9375rem !important; line-height: 1.45 !important; }
.feature .more { font-weight: 600; margin-top: .5rem; }
.feature .crumbs { color: var(--label2); }
.sunrise { background: linear-gradient(to bottom, var(--bg) 0, var(--wash) 100%); }

section.feature[data-section]:not(.night) { background: linear-gradient(to bottom, var(--bg) 0, var(--sky1) 14%, var(--sky2) 40%, var(--sky3) 70%, var(--sky4) 100%); }
.night { background: #0c2026; color: #f2f5f3; --sketch: #c9d6d1; --tint: #8fdcbc; --label2: #c4ccc7; --accent: #f2b98d; --p-far: #1d3f49; --p-mid: #27565a; --p-snow: #cfe0dc; --p-hill: #235349; --p-hill2: #1e4840; --p-water: #24606f; --p-tree: #3f9a78; --p-leaf: #4fae85; --p-trunk: #7a6248; --p-door: #f2b98d; --p-glow: #ffd98f; --p-white: #d9e3de; --p-moon: #f3e7c8; }

.night .inner { padding-bottom: calc(max(10.625rem, 11.81vw) + 4rem); }
#protect .inner { padding-bottom: calc(8rem + max(0px, (100vw - 90rem) * .11)); }
#share .inner { padding-bottom: calc(11rem + max(0px, (100vw - 90rem) * .128)); }
.planb .inner { padding-bottom: calc(8rem + max(0px, (100vw - 90rem) * .15)); }
.night strong { color: var(--tint); font-weight: 600; }
.cipher { margin: 1.25rem 0; padding: 0; list-style: none; color: var(--tint); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: min(2rem, 9.5vw); font-weight: 700; line-height: 1.25; letter-spacing: .04em; text-transform: uppercase; }
.cipher .said { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cipher .open { color: transparent; -webkit-text-stroke: 1px var(--tint); }
.night .phone { box-shadow: 0 1.5rem 3.75rem rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .14); }
.section { padding-top: 3.5rem; padding-bottom: 1rem; }
.sectiontitle { margin-bottom: 1rem; }
.sectionintro { margin: -.5rem 0 1rem; max-width: 42rem; color: var(--label2); }
.headband { position: relative; overflow: hidden; padding-bottom: calc(max(11rem, 16.667vw) * .9 + 1.25rem); background: linear-gradient(to bottom, var(--bg) 0, var(--wash) 100%); }
.headband .pagehead { position: relative; }

.headband .sketch { height: max(11rem, 16.667vw); }
.articleband { position: relative; overflow: hidden; height: 6rem; background: linear-gradient(to bottom, var(--bg) 0, var(--wash) 100%); }
.articleband .sketch { height: 6rem; }

@media (min-width: 125rem) { .sketch circle { display: none; } }


.tabs { position: sticky; bottom: .875rem; z-index: 5; display: flex; justify-content: center; height: 4.875rem; margin-top: -5.75rem; padding: 0 .625rem; pointer-events: none; }
.tabbar { display: flex; gap: 2px; padding: .3125rem; border-radius: 999px; background: var(--bar); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 .625rem 1.875rem rgba(10, 30, 34, .26); pointer-events: auto; }
.tabbar { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.tabbar::-webkit-scrollbar { display: none; }
.tabbar a { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: 5.125rem; height: 4rem; border-radius: 999px; color: var(--bar-text); font-size: .8125rem; font-weight: 600; text-decoration: none; }
.tabbar a:hover { background: var(--bar-hover); }
.tabbar a[aria-current] { background: var(--bar-current); box-shadow: inset 0 0 0 1.5px var(--bar-ink); color: var(--bar-ink); }
.tabbar svg { width: 1.875rem; height: 1.875rem; }
.tabbar svg [stroke="#145C47"] { stroke: var(--bar-ink); }
.tabbar svg [fill="#145C47"] { fill: var(--bar-ink); }
.tabbar svg [fill="#A8DCC6"] { fill: var(--bar-fill); }


.guides { max-width: 44rem; overflow: hidden; border-radius: .75rem; background: var(--bg2); }
.help { position: relative; display: block; min-height: 2.75rem; padding: .75rem 2.5rem .75rem 1rem; color: var(--label); text-decoration: none; }
.help + .help { border-top: 1px solid var(--separator); }
.help::after { content: ""; position: absolute; inset-inline-end: 1rem; top: 50%; width: .5rem; height: .5rem; margin-top: -.25rem; border-top: 2px solid var(--label2); border-right: 2px solid var(--label2); transform: rotate(45deg); }
.help:hover { background: var(--separator); }
.help strong { display: block; font-weight: 400; }
.help span { display: block; color: var(--label2); font-size: .9375rem; line-height: 1.33; }
.help.withicon { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: .875rem; align-items: center; }
.help.withicon .icon { grid-row: span 2; display: flex; }
.icon { display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: .6875rem; background: #dcebe3; flex: none; }
.icon svg { width: 2rem; height: 2rem; }


.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1.5rem 2.5rem; }
.info h3, .card h4 { margin-bottom: .25rem; font-size: 1.0625rem; font-weight: 600; }
.info p, .card p { color: var(--label2); font-size: 1rem; line-height: 1.4; }


.pagehead { padding-top: 2rem; padding-bottom: .5rem; }
.crumbs { margin-bottom: 1rem; color: var(--label2); font-size: .875rem; }
.crumbs a { text-decoration: none; }
.label { display: flex; align-items: center; gap: .625rem; margin-bottom: .75rem; font-weight: 600; }
.block { padding-top: 2.5rem; padding-bottom: .5rem; }
.block h2 { margin-bottom: 1rem; }
.groupintro { margin: .25rem 0 1rem; max-width: 42rem; color: var(--label2); }
.steps { list-style: none; padding: 0; counter-reset: step; max-width: 44rem; }
.steps li { position: relative; counter-increment: step; padding: .875rem 0 .875rem 2.25rem; color: var(--label2); border-top: 1px solid var(--separator); }
.steps li:first-child { border-top: 0; }
.steps li::before { content: counter(step); position: absolute; inset-inline-start: 0; top: .875rem; width: 1.5rem; color: var(--tint); font-weight: 600; font-variant-numeric: tabular-nums; }
.steps b { color: var(--label); font-weight: 600; }
.limits { max-width: 44rem; padding-inline-start: 1.25rem; color: var(--label2); }
.limits li + li { margin-top: .5rem; }
.nextpage { padding-top: 2rem; padding-bottom: 4rem; }
.more { display: inline-flex; align-items: center; min-height: 2.75rem; }
.feature .more + .more { margin-inline-start: 1.25rem; }

.layers { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: 1.5rem 2rem; align-items: start; margin-top: 1rem; }
.layersmap { position: sticky; top: 4.5rem; display: block; width: 100%; height: auto; }
.layersmap .ring { fill: var(--tint); fill-opacity: .08; stroke: var(--sketch); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.layersmap .badge { fill: var(--bg); stroke: var(--sketch); stroke-width: 1.5; }
.layersmap .badgetext { fill: var(--label); font-size: 15px; font-weight: 600; }
.layersmap .core { fill: #f6c39a; stroke: #d9874f; stroke-width: 1.5; }
.layersmap .coretext { fill: #16231c; font-size: 17px; font-weight: 700; }
.topics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: .875rem; margin-top: 1rem; }
.topic { display: block; padding: 1.125rem; border-radius: 1rem; background: var(--bg2); color: var(--label); text-decoration: none; }
.topic:hover { background: var(--separator); }
.topic .icon { margin-bottom: .75rem; }
.topic strong { display: block; font-weight: 600; line-height: 1.25; }
.topic > span:last-child { display: block; margin-top: .25rem; color: var(--label2); font-size: .9375rem; line-height: 1.35; }
.sectionmore { margin-top: 1.5rem; font-weight: 600; }
.sectionmore + .sectionmore { margin-inline-start: 1.25rem; }
.more::after { content: ""; flex: none; width: 1.125rem; height: 1.125rem; margin-inline-start: .375rem; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M1 17L7.5 7l3.5 5 2.5-3L19 17z'/%3E%3Ccircle cx='15' cy='5' r='2.4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M1 17L7.5 7l3.5 5 2.5-3L19 17z'/%3E%3Ccircle cx='15' cy='5' r='2.4'/%3E%3C/svg%3E") center / contain no-repeat; }
.todo { padding: 0 .375rem; border-radius: .25rem; background: var(--todo-fill); color: var(--todo); font-weight: 600; }
.chip::after { content: ", "; }
.chip:last-child::after { content: "."; }


.article { max-width: 45rem; padding-top: 2rem; }
.article p { margin-bottom: .875rem; color: var(--label2); }
.article .lede { margin-bottom: 0; }
.article p a, .article li a { color: var(--tint); }
.byline { margin-top: .75rem; margin-bottom: 0; font-size: .875rem; }
.article .byline { margin-bottom: 0; color: var(--label2); }
.answer { margin-top: 1.5rem; margin-bottom: 1.5rem; padding: 1rem 1.25rem; border-radius: .75rem; background: var(--bg2); }
.answer strong { display: block; margin-bottom: .125rem; font-size: .875rem; font-weight: 600; color: var(--label2); }
.article ol:not(.steps), .article ul:not(.limits):not(.sources) { padding-inline-start: 1.25rem; margin-bottom: .875rem; color: var(--label2); }
.article ol:not(.steps) li + li, .article ul:not(.limits):not(.sources) li + li { margin-top: .5rem; }
.article li b { color: var(--label); font-weight: 600; }
.note { margin-top: 1rem; padding: .875rem 1.25rem; border-radius: .75rem; background: var(--bg2); font-size: 1rem; }
.note b { color: var(--label); font-weight: 600; }
.article p.note { color: var(--label2); }
.sources { padding-inline-start: 1.25rem; color: var(--label2); font-size: .875rem; }
.sources li + li { margin-top: .25rem; }


.table { width: 100%; border-collapse: collapse; margin-bottom: .875rem; font-size: 1rem; line-height: 1.4; }
.table th, .table td { padding-block: .75rem; padding-inline: 0 .75rem; text-align: start; vertical-align: top; border-top: 1px solid var(--separator); }
.table tr:first-child th { border-top: 0; color: var(--label2); font-size: .875rem; font-weight: 400; }
.table td { color: var(--label2); }
.table td b { color: var(--label); font-weight: 600; }
.table td:first-child { width: 35%; }
.small { display: block; margin-top: .125rem; color: var(--label2); font-size: .875rem; font-weight: 400; }
.source { display: inline-block; margin-top: .25rem; font-size: .875rem; }


details { border-top: 1px solid var(--separator); }
details:last-of-type { border-bottom: 1px solid var(--separator); }
.menu { border: 0 !important; }
.article details p { margin: 0; padding-bottom: 1rem; }
details > p { padding-bottom: 1rem; color: var(--label2); }
details > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.75rem; padding: .625rem 0; cursor: pointer; list-style: none; font-weight: 600; }
details > summary::-webkit-details-marker { display: none; }
details:not(.menu) > summary::after { content: ""; flex: none; width: .5rem; height: .5rem; margin-inline-end: .25rem; border-right: 2px solid var(--label2); border-bottom: 2px solid var(--label2); transform: rotate(45deg); }
details[open]:not(.menu) > summary::after { transform: rotate(225deg); }
.faq { max-width: 44rem; }


.footlangs { display: flex; flex-wrap: wrap; gap: 0 1rem; width: 100%; margin-top: .5rem; font-size: .875rem; }
.footlangs a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--label2); text-decoration: none; }
.footlangs a:hover { color: var(--tint); }
.footlangs a[aria-current] { color: var(--label); font-weight: 600; }
.langmenu { position: relative; border: 0 !important; }
.langmenu > summary { display: flex; align-items: center; gap: .375rem; min-height: 2.75rem; padding: 0 .25rem; color: var(--label); font-size: .875rem; font-weight: 600; cursor: pointer; list-style: none; }
.langmenu > summary::-webkit-details-marker { display: none; }
.langmenu > summary::after { display: none !important; }
.langmenu svg { width: 1.125rem; height: 1.125rem; }
.langlist { position: absolute; top: 100%; inset-inline-end: 0; z-index: 12; display: flex; flex-direction: column; width: max-content; min-width: 12rem; max-height: min(70vh, 26rem); overflow-y: auto; padding: .375rem; border: 1px solid var(--separator); border-radius: .875rem; background: var(--bg); box-shadow: 0 .75rem 2rem rgba(10, 30, 34, .18); }
.langlist a { display: flex; align-items: center; min-height: 2.75rem; padding: 0 .75rem; border-radius: .5rem; color: var(--label); text-decoration: none; }
.langlist a:hover { background: var(--bg2); }
.langlist a[aria-current] { color: var(--tint); font-weight: 600; }
@media (max-width: 22rem) { .langmenu svg { display: none; } .navtools { gap: .125rem; } }
:lang(ja) *, :lang(ko) *, :lang(hi) *, :lang(zh) *, :lang(ar) *, :lang(he) *, :lang(th) * { letter-spacing: normal; }
:lang(ar) h1, :lang(ar) h2, :lang(he) h1, :lang(he) h2, :lang(th) h1, :lang(th) h2, :lang(hi) h1, :lang(hi) h2 { line-height: 1.3; }
[dir="rtl"] .help::after { transform: rotate(-135deg); }
[dir="rtl"] .more::after { transform: scaleX(-1); }
.sketch, .herosketch { direction: ltr; }
[dir="rtl"] svg text[text-anchor="start"], [dir="rtl"] svg text:not([text-anchor]) { direction: ltr; }
.cipher li { unicode-bidi: plaintext; }
[dir="rtl"] .cipher li { text-align: right; }
[dir="rtl"] .cipher li:last-child { font-family: inherit; }
:lang(ja) h1, :lang(ja) h2 { word-break: auto-phrase; }
.sitefoot { margin-top: 3rem; padding: 1.5rem 0 7.5rem; background: var(--bg2); }
.footrow { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 2rem; }
.footbrand { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; color: var(--label); font-weight: 600; text-decoration: none; }
.footbrand img { width: 1.5rem; height: 1.5rem; border-radius: .35rem; }
.footlinks { display: flex; flex-wrap: wrap; column-gap: 1.25rem; }
.foot { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--label2); font-size: .875rem; text-decoration: none; }
.foot:hover { color: var(--tint); }
.footnote { flex-basis: 100%; color: var(--label2); font-size: .8125rem; }


@media (max-width: 47.5rem) {
  .navlinks { display: none; }
  .menu { display: block; }
  
  .hero { display: flex; flex-direction: column; padding-top: 3.25rem; }
  .herostage { display: contents; }
  .herosketch { --band: min(100vw, 30rem); position: relative; order: -1; flex: none; align-self: flex-start; bottom: auto; left: auto; right: auto; width: calc(var(--band) * 2.571); max-width: none; height: calc(var(--band) * .8214); margin: calc(var(--band) * -.089) 0 calc(var(--band) * -.107) calc((100vw - var(--band)) / 2 - var(--band) * .107); }
  [dir="rtl"] .herosketch { align-self: flex-end; }
  .herosketch .flow, .herosketch .flow2 { display: none; }
  .herosketch { -webkit-mask-image: linear-gradient(to bottom, #000 74%, transparent 87%); mask-image: linear-gradient(to bottom, #000 74%, transparent 87%); }
  .sketchpause { top: 3.5rem; inset-inline-end: .5rem; }
  .feature .more + .more { margin-inline-start: 0; }
  .feature .more { display: flex; width: fit-content; }
  .layers { grid-template-columns: minmax(0, 1fr); }
  .layersmap { position: static; max-width: 17rem; margin: 0 auto; }
  .herotext { padding-top: .5rem; }
  .herophone { margin: 2.5rem auto 3.5rem; }
  .inner { grid-template-columns: minmax(0, 1fr); padding-top: 3.5rem; padding-bottom: 8rem; }
  .night .inner { padding-bottom: 8rem; }
  .flip .inner > :first-child { order: 0; }
  .sketch { height: 10.5rem; }
  .tabbar a { width: 3.875rem; font-size: .71875rem; }
  .tabbar svg { width: 1.625rem; height: 1.625rem; }
  .table:not(.compare), .table:not(.compare) tbody, .table:not(.compare) tr, .table:not(.compare) td { display: block; width: auto !important; }
  .table:not(.compare) tr:first-child:has(th) { display: none; }
  .table:not(.compare) tr { padding: .75rem 0; border-top: 1px solid var(--separator); }
  .table:not(.compare) td { padding: 0; border: 0; }
  .table:not(.compare) td + td { margin-top: .375rem; }
  .table.compare { display: block; overflow-x: auto; }
}


@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media (prefers-reduced-transparency: reduce) {
  .navbar { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media print {
  .navbar, .sitefoot, .note { display: none; }
  body { background: #fff; color: #000; }
}


.tool { margin-block: 1.5rem; padding: 1.25rem; border-radius: .75rem; background: var(--bg2); }
.article .tool h2 { margin-top: 0; }
.tool [hidden], .plansheet [hidden] { display: none !important; }
.tool label { display: block; margin-bottom: .375rem; font-weight: 600; color: var(--label); }
.tool input { display: block; width: 100%; min-height: 2.75rem; padding: .5rem .75rem; border: 1px solid var(--label2); border-radius: .5rem; background: var(--bg); color: var(--label); font: inherit; }
.tool input.toolfile { padding: .375rem; }
.toolfile::file-selector-button { min-height: 2.75rem; margin-inline-end: .75rem; padding: 0 1rem; border: 0; border-radius: .625rem; background: var(--tint-fill); color: var(--on-tint); font: inherit; font-weight: 600; cursor: pointer; }
.article .toolhint, .toolhint { margin: .5rem 0 0; color: var(--label2); font-size: .9375rem; line-height: 1.4; }
.toolhint:empty { display: none; }
span.toolhint { display: block; }
.toolheading { margin-top: 1.5rem; font-size: 1.0625rem; }
.toolactions { display: flex; flex-wrap: wrap; gap: .75rem; margin-block: 1rem; }
button.button { border: 0; padding-block: .5rem; font: inherit; font-weight: 600; cursor: pointer; }
.button.toolquiet { background: transparent; color: var(--tint); box-shadow: inset 0 0 0 1.5px var(--tint); }
.button.toolquiet:hover { color: var(--tint); }
button.button:disabled { opacity: .45; cursor: default; }
.article .toolanswer, .article .toolgood { margin: 1rem 0 .5rem; color: var(--label); }
.toolanswer b, .toolgood { font-weight: 600; }
.tool .table { margin-block: .5rem 0; }
.tool .table td:first-child { width: 30%; }
.toolsteps { margin-block: 1rem; }
.toolcanvas { display: block; max-width: 100%; max-height: 65vh; margin: 1rem auto; touch-action: pinch-zoom; cursor: crosshair; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.toolresult { display: block; max-width: 100%; height: auto; margin: 1rem auto; }
.toolwarning { margin-block: 1.5rem; padding: 1rem 1.25rem; border-inline-start: .25rem solid var(--accent); border-radius: .5rem; background: var(--wash); }
.article .toolwarning p { color: var(--label); }
.article .toolwarning p:last-child { margin-bottom: 0; }
.toolgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: .75rem; margin-top: .75rem; align-items: start; }
.toolfield { min-width: 0; }
.toolrow + .toolrow { margin-top: 1.25rem; }
.toolrow .button { grid-column: 1 / -1; justify-self: start; min-height: 2.75rem; }
.plansheet { margin-block: 1rem; padding: 1.25rem; border: 1px solid var(--separator); border-radius: .75rem; }
.article .plansheet h2 { margin-top: 0; }
.plansheet h3 { margin-top: 1.25rem; margin-bottom: .5rem; font-size: 1.0625rem; }
.article .plansheet p.sheetwarn { color: var(--label); }
.sheetblank { display: inline-block; min-width: 10rem; min-height: 1.2em; border-bottom: 1px solid var(--label2); }
.plantable { width: 100%; margin-block: .5rem; border-collapse: collapse; }
.plantable td { width: 50%; height: 2.25rem; padding-block: .25rem; padding-inline: 0 .75rem; vertical-align: bottom; color: var(--label); }
.plantable td.sheetline { border-bottom: 1px solid var(--label2); }
.plantable td + td { padding-inline-start: .75rem; }
@media print {
  :root:has(body.planpage) { color-scheme: light; background: #fff; }
  .planpage .tabs, .planpage .articleband, .planpage .nextpage, .planpage .skip { display: none; }
  .planpage .article { max-width: none; padding: 0; }
  .planpage .article > :not(.plansheet) { display: none; }
  .plansheet { margin: 0; padding: 0; border: 0; font-size: 10.5pt; line-height: 1.35; }
  .plansheet, .plansheet * { color: #000 !important; background: transparent !important; }
  .plansheet h2 { font-size: 16pt; }
  .plansheet h3 { margin-top: 10pt; font-size: 11.5pt; break-after: avoid; }
  .plansheet li { break-inside: avoid; }
  .plansheet .sheetblank, .plantable td.sheetline { border-color: #000; }
  .plantable td { height: 1.5rem; }
}


.proof { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0 auto 1.25rem; padding: 0; list-style: none; }
.proof li { padding: .3125rem .875rem; border: 1px solid var(--separator); border-radius: 999px; background: var(--bg); color: var(--tint); font-size: .875rem; font-weight: 600; }
.wall .wallgroup { margin-top: 2rem; font-size: 1.0625rem; color: var(--accent); }
.wall .wallgroup:first-of-type { margin-top: 1.25rem; }
.topic.later { background: transparent; box-shadow: inset 0 0 0 1.5px var(--separator); }
.soon { display: block; width: fit-content; margin-top: .5rem; padding: .125rem .5rem; border-radius: .375rem; background: var(--todo-fill); color: var(--todo); font-size: .8125rem; font-style: normal; font-weight: 600; }
.threestep { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1.5rem 2.5rem; padding: 0; list-style: none; counter-reset: step3; }
.threestep li { counter-increment: step3; min-width: 0; }
.threestep li::before { content: counter(step3); display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; margin-bottom: .75rem; border-radius: 50%; background: var(--wash); color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.threestep strong { display: block; margin-bottom: .25rem; font-weight: 600; }
.threestep span { color: var(--label2); }
.table.spec { max-width: 44rem; }
.table.spec td:first-child { width: 30%; }


:root {
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  --text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --hw: 700;
  --ht: -.022em;
  --card-top: #ffffff;
  --card-bot: #fbf6ef;
  --hair: rgba(22, 35, 28, .10);
  --hair-strong: rgba(20, 92, 71, .35);
  --glow: rgba(242, 160, 107, .22);
  --lift: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 18px 40px -28px rgba(20, 60, 50, .45);
  --icon-bg: radial-gradient(circle at 30% 25%, #fff6e6 0, #e5f1ea 70%);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --card-top: #183039; --card-bot: #11252c; --hair: rgba(242, 245, 243, .10); --hair-strong: rgba(92, 201, 160, .45);
  --glow: rgba(242, 185, 141, .14); --lift: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 18px 40px -26px rgba(0, 0, 0, .7);
  --icon-bg: radial-gradient(circle at 30% 25%, #2a4b4f 0, #173238 70%); } }
:root[data-theme="dark"] {
  --card-top: #183039; --card-bot: #11252c; --hair: rgba(242, 245, 243, .10); --hair-strong: rgba(92, 201, 160, .45);
  --glow: rgba(242, 185, 141, .14); --lift: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 18px 40px -26px rgba(0, 0, 0, .7);
  --icon-bg: radial-gradient(circle at 30% 25%, #2a4b4f 0, #173238 70%); }


:root { --display: "Manrope", -apple-system, "Segoe UI", sans-serif; --text: "Manrope", -apple-system, "Segoe UI", sans-serif; --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace; --hw: 700; --ht: -.03em; }

:root body { font-family: var(--text); }
:root :is(.herotitle, .feature h2, .sectiontitle, .pagehead h1, .article h1) { font-family: var(--display); font-weight: var(--hw); letter-spacing: var(--ht); }
:root .sectiontitle { font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.08; margin-bottom: .75rem; }
:root .cipher { font-family: var(--mono); }


:root .proof { gap: .375rem 1.25rem; }
:root .proof li { display: inline-flex; align-items: center; gap: .45rem; padding: 0; border: 0; background: none; color: var(--label); font-size: .8125rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
:root .proof li::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--tint); box-shadow: 0 0 0 .25rem rgba(20, 92, 71, .14); }


:root .button { border-radius: 999px; padding: 0 1.75rem; background: linear-gradient(180deg, #1d7a5e 0, var(--tint-fill) 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 10px 24px -12px rgba(20, 92, 71, .7); }


:root .wall .wallgroup { display: flex; align-items: center; gap: .75rem; margin-top: 2.75rem; font-family: var(--mono); font-size: .75rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
:root .wall .wallgroup::after { content: ""; flex: 1; height: 1px; background: var(--hair); }


:root .wall .topics { gap: .75rem; }
:root .topic { position: relative; overflow: hidden; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: .875rem; align-items: start; padding: 1rem 1.125rem 1.0625rem; border: 1px solid var(--hair); border-radius: 1rem; background: linear-gradient(180deg, var(--card-top) 0, var(--card-bot) 100%); box-shadow: var(--lift); transition: transform .25s ease, border-color .25s ease; }
:root .topic::before { content: ""; position: absolute; top: -6rem; right: -4rem; width: 14rem; height: 14rem; border-radius: 50%; background: radial-gradient(circle, var(--glow) 0, transparent 65%); opacity: 0; transition: opacity .35s ease; pointer-events: none; }
:root .topic:hover { background: linear-gradient(180deg, var(--card-top) 0, var(--card-bot) 100%); border-color: var(--hair-strong); transform: translateY(-3px); }
:root .topic:hover::before { opacity: 1; }
:root .topic .icon { grid-row: span 2; width: 2.5rem; height: 2.5rem; margin: 0; border-radius: 50%; background: var(--icon-bg); box-shadow: 0 0 0 1px var(--hair) inset; }
:root .topic .icon svg { width: 1.5rem; height: 1.5rem; }
:root .topic strong { padding-top: .0625rem; font-family: var(--display); font-size: 1.0625rem; font-weight: var(--hw); letter-spacing: -.01em; line-height: 1.25; }
:root .topic > span:last-child { margin-top: .25rem; font-size: .9375rem; line-height: 1.4; }
@media (min-width: 40rem) {
  :root .wall .topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 60rem) {
  :root .wall .topics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.wallsoon { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-top: 1.25rem; color: var(--label2); font-size: .9375rem; }
.wallsoon .soon { margin: 0; }


:root .threestep li { padding-top: 1.25rem; border-top: 1px solid var(--hair); }
:root .threestep li::before { width: auto; height: auto; margin-bottom: .75rem; border-radius: 0; background: none; font-family: var(--display); font-size: 2.75rem; font-weight: 400; line-height: 1; color: var(--accent); }
:root .threestep strong { font-family: var(--display); font-size: 1.25rem; font-weight: var(--hw); }


:root #spec .table.spec { display: block; max-width: none; padding: .75rem 2rem 1rem; border-radius: 1.5rem; background: radial-gradient(120% 140% at 100% 0, #17414a 0, #0c2026 60%); box-shadow: 0 30px 60px -36px rgba(12, 32, 38, .8); }
:root #spec .table.spec tbody { display: table; width: 100%; }
:root #spec .table.spec td { padding-block: 1rem; border-top-color: rgba(242, 245, 243, .12); color: #c4ccc7; }
:root #spec .table.spec tr:first-child td { border-top: 0; }
:root #spec .table.spec td b { font-family: var(--mono); font-size: .8125rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: #8fdcbc; }
@media (max-width: 47.5rem) {
  :root #spec .table.spec { padding: .5rem 1.25rem .75rem; }
  :root #spec .table.spec tbody { display: block; }
}


:root .phone { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08) inset, 0 2rem 4.5rem -1.5rem rgba(14, 40, 40, .45); }

@media (prefers-reduced-motion: reduce) { html .topic, html .topic::before { transition: none; } html .topic:hover { transform: none; } }



:root .wall .wallgroup { font-size: .8125rem; }
@media (prefers-contrast: more) {
  :root { --hair: rgba(0, 0, 0, .45); --hair-strong: rgba(0, 0, 0, .8); }
  :root .topic > span:last-child, :root .threestep span { color: var(--label); }
  :root .topic::before { display: none; }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hair: rgba(255, 255, 255, .5); --hair-strong: rgba(255, 255, 255, .85); } }
@media (prefers-contrast: more) { :root[data-theme="dark"] { --hair: rgba(255, 255, 255, .5); --hair-strong: rgba(255, 255, 255, .85); } }




:is(.feature h1, .block h2, .grouptitle, .article h2, .info h3, details > summary, .help strong, .plansheet h2, .tool h2) { font-family: var(--display); letter-spacing: -.012em; }
:is(.feature h1, .pagehead h1, .article h1) { font-weight: var(--hw); letter-spacing: var(--ht); }
:is(.block h2, .grouptitle) { font-weight: 700; font-size: clamp(1.625rem, 3.2vw, 2.125rem); letter-spacing: -.025em; }
.article h2 { font-weight: 700; letter-spacing: -.02em; }
.intro, .lede { letter-spacing: -.005em; }


.crumbs { font-family: var(--mono); font-size: .8125rem; letter-spacing: .04em; }


.cards { gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.info { padding: 1.125rem 1.25rem 1.1875rem; border: 1px solid var(--hair); border-radius: 1rem; background: linear-gradient(180deg, var(--card-top) 0, var(--card-bot) 100%); box-shadow: var(--lift); }
.info h3 { margin-bottom: .375rem; font-size: 1.0625rem; font-weight: 700; line-height: 1.25; }
.info p { font-size: .9688rem; line-height: 1.45; }

.night .info { border-color: rgba(242, 245, 243, .12); background: linear-gradient(180deg, #183039 0, #11252c 100%); box-shadow: none; }


.guides { border: 1px solid var(--hair); border-radius: 1.125rem; background: linear-gradient(180deg, var(--card-top) 0, var(--card-bot) 100%); box-shadow: var(--lift); }
.help { padding-block: .9375rem; transition: background-color .2s ease; }
.help + .help { border-top-color: var(--hair); }
.help:hover { background: var(--glow); }
.help strong { font-weight: 600; letter-spacing: -.01em; }
.help span { margin-top: .125rem; }
.help::after { border-color: var(--tint); }


.topics { gap: .75rem; }


.steps li { border-top-color: var(--hair); }
.steps li::before { font-family: var(--display); font-weight: 700; color: var(--accent); }


.answer { border: 1px solid var(--hair); border-radius: 1rem; background: linear-gradient(180deg, var(--wash) 0, var(--bg2) 100%); }
.answer strong { font-family: var(--mono); font-size: .75rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.note { border: 1px solid var(--hair); border-radius: 1rem; background: var(--bg2); }


.table th, .table td { border-top-color: var(--hair); }
.table tr:first-child th { font-family: var(--mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }


details { border-top-color: var(--hair); }
details:last-of-type { border-bottom-color: var(--hair); }
details > summary { font-weight: 700; }


.tool { border: 1px solid var(--hair); border-radius: 1.125rem; background: linear-gradient(180deg, var(--card-top) 0, var(--card-bot) 100%); box-shadow: var(--lift); }
.tool input { border-color: var(--hair-strong); border-radius: .75rem; }
.button.toolquiet { border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--tint); }
.toolfile::file-selector-button { border-radius: 999px; }
.plansheet { border-color: var(--hair); border-radius: 1.125rem; }


.sitefoot { border-top: 1px solid var(--hair); }


html:is(:lang(ar), :lang(he), :lang(th), :lang(hi), :lang(ja), :lang(ko), :lang(zh)) {
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  --text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
}
html:is(:lang(ar), :lang(he), :lang(th), :lang(hi), :lang(ja), :lang(ko), :lang(zh)) :is(.crumbs, .answer strong, .table tr:first-child th, .wall .wallgroup, .proof li) { font-family: var(--text); letter-spacing: normal; text-transform: none; }


@media (prefers-contrast: more) {
  .info p, .help span { color: var(--label); }
}


@media print {
  .info, .guides, .answer, .note, .tool { box-shadow: none; background: none; border-color: #999; }
}


.cards.pairs { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }


.langlist a, .footlangs a { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }


.cta { display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: 1rem; margin-top: 2.5rem; padding: 1.5rem 1.5rem 1.625rem; border: 1px solid var(--hair); border-radius: 1.25rem; background: linear-gradient(180deg, var(--wash) 0, var(--bg2) 100%); box-shadow: var(--lift); }
.cta .ctaicon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--icon-bg); box-shadow: 0 0 0 1px var(--hair) inset; }
.cta .ctaicon svg { width: 1.625rem; height: 1.625rem; }
.cta .ctalabel { display: block; font-family: var(--mono); font-size: .8125rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
:root .cta h2.ctatitle { margin: .375rem 0; font-family: var(--display); font-size: 1.375rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
:root .cta p { margin: 0; }
.cta .ctaactions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: 1.125rem; }
.cta .ctasoon { color: var(--label2); font-size: .9375rem; }
@media (max-width: 30rem) {
  .cta { grid-template-columns: minmax(0, 1fr); padding: 1.25rem; }
  .cta .ctaicon { margin-bottom: .75rem; }
}
@media print { .cta { display: none; } }

.ctawrap { padding-block: 1rem 3rem; }

.ctawrap .cta { max-width: 44rem; margin: 0; }
.article + .ctawrap { max-width: 45rem; }
.article + .ctawrap .cta { max-width: none; }


.wgroup { margin-top: 2.25rem; }
:root .wall .wgroup .wallgroup { grid-column: 1 / -1; margin-top: 0; margin-bottom: 1rem; }
:root .wlead { display: flex; flex-direction: column; padding: 1.5rem; }
:root .wlead .icon { width: 3rem; height: 3rem; margin-bottom: .875rem; }
:root .wlead strong { font-size: 1.5rem; line-height: 1.15; letter-spacing: -.02em; }
:root .wlead > span:not(.icon):not(.wleadart) { margin-top: .5rem; font-size: 1rem; }
:root .wleadart { display: block; align-self: stretch; position: relative; height: 6.5rem; margin: 1.25rem -1.5rem -1.5rem; overflow: hidden; border-radius: 0 0 1rem 1rem; }
.wleadart .sketch { position: absolute; inset: auto 0 0 0; height: 100%; }
.wg-night .wleadart { background: #0c2026; --sketch: #c9d6d1; --p-far: #1d3f49; --p-mid: #27565a; --p-snow: #cfe0dc; --p-hill: #235349; --p-hill2: #1e4840; --p-water: #24606f; --p-tree: #3f9a78; --p-leaf: #4fae85; --p-trunk: #7a6248; --p-door: #f2b98d; --p-glow: #ffd98f; --p-white: #d9e3de; --p-moon: #f3e7c8; }
.wlist { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 1.5rem; margin-top: .75rem; }
:root .wrow { padding: .875rem 0; border: 0; border-top: 1px solid var(--hair); border-radius: 0; background: none; box-shadow: none; }
:root .wrow:hover { transform: none; background: none; }
:root .wrow::before { display: none; }
@media (min-width: 48rem) { .wlist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) {
  .wgroup { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 2rem; align-items: start; }
  .wlist { margin-top: 0; }
}
:root .wrow { align-content: start; }


.sketch .shoot { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .sketch.play .sw, .sketch.play .sw2 { transform-box: fill-box; transform-origin: 50% 100%; animation: scenesway 2.4s ease-in-out 2; }
  .sketch.play .sw2 { animation-duration: 1.6s; animation-iteration-count: 3; }
  .sketch.play .glide { animation: sceneglide 4.8s ease-in-out both; }
  .sketch.play .cloud { animation: scenecloud 4.8s ease-in-out both; }
  .sketch.play .rip { animation: scenerip 2.4s ease-in-out 2; }
  .sketch.play .glt, .sketch.play .twk { animation: sceneglint 1.6s ease-in-out 3; }
  .sketch.play .beam { transform-box: view-box; transform-origin: 620px 66px; animation: scenebeam 2.4s ease-in-out 2; }
  .sketch.play .bob { animation: scenebob 2.4s ease-in-out 2; }
  .sketch.play .pulse { animation: scenepulse 2.4s ease-in-out 2; }
  .sketch.play .shoot { animation: sceneshoot 1.4s ease-out .8s both; }
  .sketch.play .grow { transform-box: fill-box; transform-origin: 50% 100%; animation: scenegrow 1.6s cubic-bezier(.2, .7, .2, 1) both; }
  .sketch.play .fly { animation: scenefly 2.4s ease-in-out 2; }
}
@keyframes scenesway { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-2deg); } 75% { transform: rotate(2deg); } }
@keyframes sceneglide { from { transform: translate(-40px, 8px); } to { transform: translate(0, 0); } }
@keyframes scenecloud { from { transform: translateX(-36px); } to { transform: translateX(0); } }
@keyframes scenerip { 0%, 100% { opacity: 1; transform: translateX(0); } 50% { opacity: .2; transform: translateX(8px); } }
@keyframes sceneglint { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }
@keyframes scenebeam { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
@keyframes scenebob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(-2deg); } }
@keyframes scenepulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes sceneshoot { 0% { opacity: 0; transform: translate(0, 0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-110px, 38px); } }
@keyframes scenegrow { from { transform: scale(.35); } to { transform: scale(1); } }
@keyframes scenefly { 0%, 100% { transform: translate(0, 0); opacity: 1; } 50% { transform: translate(5px, -7px); opacity: .4; } }
.night, .wg-night .wleadart { --p-shade: #1f474b; --p-far2: #183843; --p-front1: #1f4b40; --p-front2: #183f35; }
.sketch .glt { stroke: var(--p-white); }
.sketch .rip { stroke-opacity: .7; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sketch .sun { fill: var(--p-moon); stroke: #e8d9ae; }
  :root:not([data-theme="light"]) :is(.herosketch, .sketch) { --sketch: #7d9f99; --p-far: #1b2e40; --p-far2: #15263a; --p-mid: #23394a; --p-shade: #192b3a; --p-snow: #a9bccb; --p-hill: #16302c; --p-hill2: #132a27; --p-front1: #10251f; --p-front2: #0c1f1a; --p-water: #1d3a52; --p-tree: #2e5c4c; --p-leaf: #3a6b55; --p-trunk: #4f4234; --p-white: #c8d4dc; --p-glow: #ffe2a0; }
}
:root[data-theme="dark"] .sketch .sun { fill: var(--p-moon); stroke: #e8d9ae; }
:root[data-theme="dark"] :is(.herosketch, .sketch) { --sketch: #7d9f99; --p-far: #1b2e40; --p-far2: #15263a; --p-mid: #23394a; --p-shade: #192b3a; --p-snow: #a9bccb; --p-hill: #16302c; --p-hill2: #132a27; --p-front1: #10251f; --p-front2: #0c1f1a; --p-water: #1d3a52; --p-tree: #2e5c4c; --p-leaf: #3a6b55; --p-trunk: #4f4234; --p-white: #c8d4dc; --p-glow: #ffe2a0; }

.grouptitle { scroll-margin-top: 5.5rem; }
.gtopics { padding-top: 1.75rem; }
.gcontents { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem; max-width: 44rem; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hair); }
.gcontents a { display: flex; align-items: baseline; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid var(--hair); color: var(--label); text-decoration: none; }
.gcontents a:hover .gname { text-decoration: underline; }
.gnum { color: var(--accent); font-family: var(--mono); font-size: .8125rem; }
.gname { flex: 1; font-weight: 600; }
.gcount { color: var(--label2); font-family: var(--mono); font-size: .8125rem; }
@media (max-width: 40rem) { .gcontents { grid-template-columns: 1fr; } }