/* Redtech Digital theme-studio site
   Hand-maintained static CSS. Converted once from the v5 design prototype
   (Redtech Theme Studio v5.html, 2026-09-28). No preprocessor, no build step. */

@font-face{font-family:'Geist';font-style:normal;font-weight:400 700;font-display:swap;src:url("/assets/fonts/geist-latin-400_700.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:'Geist';font-style:normal;font-weight:400 700;font-display:swap;src:url("/assets/fonts/geist-latin-ext-400_700.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304-0305, 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:'Geist Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url("/assets/fonts/geist-mono-latin-400_500.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:'Geist Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url("/assets/fonts/geist-mono-latin-ext-400_500.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304-0305, 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}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:80px}
body{margin:0;background:#f4f2ee;color:#1b1916;font-family:'Geist',system-ui,sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;font-feature-settings:"ss01" 0}
a{color:#b3221b;text-decoration-thickness:1px;text-underline-offset:0.22em;text-decoration-color:rgba(179,34,27,0.4);transition:text-decoration-color 180ms cubic-bezier(.2,.7,.2,1)}
a:hover{color:#b3221b;text-decoration-color:currentColor}
:focus-visible{outline:2px solid #b3221b;outline-offset:3px;border-radius:2px}
::selection{background:#ecc9c6}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}

/* --- converted from the prototype's inline styles --- */
.anchor-mark{color: rgb(179, 34, 27); text-decoration: none; font-family: "Geist Mono", ui-monospace, monospace; font-size: 0.6em; font-weight: 400; vertical-align: 0.3em; opacity: 0; padding: 0px 8px; transition: opacity 160ms cubic-bezier(0.2, 0.7, 0.2, 1)}
.btn{min-height: 52px; padding: 0px 28px; background: rgb(179, 34, 27); color: rgb(255, 255, 255); border: 0px; border-radius: 2px; font-style: inherit; font-variant: inherit; font-weight: 600; font-stretch: inherit; font-size: 16px; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; cursor: pointer; transition: background-color 160ms cubic-bezier(0.2, 0.7, 0.2, 1)}
.code-chip{font-family: "Geist Mono", ui-monospace, monospace; font-size: 0.84em; background: rgb(234, 231, 225); padding: 1px 5px; border-radius: 2px; color: rgb(27, 25, 22); overflow-wrap: anywhere}
.eyebrow{display: block; font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; font-weight: 400; letter-spacing: 0.07em; text-transform: uppercase; line-height: 1.5; color: rgb(27, 25, 22); margin-bottom: 4px}
.entry-sub{font-family:'Geist',system-ui,sans-serif;font-size:clamp(17px,16px + 0.3vw,18.5px);font-weight:600;line-height:1.4;letter-spacing:normal;text-transform:none;color:#1b1916;margin:28px 0 6px;max-width:66ch}
.h-setting+.entry-sub{margin-top:14px}
.eyebrow-10{margin: 0px; padding-top: 14px; border-top: 1px solid rgba(27, 25, 22, 0.24); display: flex; flex-wrap: wrap; gap: 6px 32px; font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; font-weight: 400; letter-spacing: 0.07em; text-transform: uppercase; line-height: 1.5; color: rgb(102, 97, 90)}
.eyebrow-11{font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; font-weight: 400; letter-spacing: 0.07em; text-transform: uppercase; line-height: 1.5; color: rgb(102, 97, 90); white-space: nowrap}
.eyebrow-12{font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; font-weight: 400; letter-spacing: 0.07em; text-transform: uppercase; line-height: 1.5; color: rgb(27, 25, 22)}
.eyebrow-13{font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; font-weight: 400; letter-spacing: 0.07em; text-transform: uppercase; line-height: 1.5; color: rgb(27, 25, 22); background: rgb(234, 231, 225); padding: 2px 7px; border-radius: 2px}
.eyebrow-14{display: block; font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; font-weight: 400; letter-spacing: 0.07em; text-transform: uppercase; line-height: 1.5; color: rgb(27, 25, 22); margin: 0px 0px 8px}
.eyebrow-15{font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; font-weight: 400; letter-spacing: 0.07em; text-transform: uppercase; line-height: 1.5; color: rgb(102, 97, 90); margin: 0px 0px 8px}
.eyebrow-16{font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; font-weight: 400; letter-spacing: 0.07em; text-transform: uppercase; line-height: 1.5; background: rgb(234, 231, 225); padding: 2px 7px; border-radius: 2px}
.eyebrow-17{margin: 8px 0px 0px; font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; font-weight: 400; letter-spacing: 0.07em; text-transform: uppercase; line-height: 1.5; color: rgb(102, 97, 90)}
.eyebrow-18{font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; font-weight: 400; letter-spacing: 0.07em; text-transform: uppercase; line-height: 1.5; color: rgb(102, 97, 90); margin: 0px 0px 20px}
.eyebrow-2{margin: 0px; padding-top: 18px; border-top: 1px solid rgba(27, 25, 22, 0.14); display: flex; flex-wrap: wrap; gap: 6px 32px; font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; font-weight: 400; letter-spacing: 0.07em; text-transform: uppercase; line-height: 1.5; color: rgb(102, 97, 90)}
.eyebrow-3{font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; font-weight: 400; letter-spacing: 0.07em; text-transform: uppercase; line-height: 1.5; color: rgb(102, 97, 90)}
.eyebrow-4{display: block; font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; font-weight: 400; letter-spacing: 0.07em; text-transform: uppercase; line-height: 1.5; color: rgb(102, 97, 90); margin-bottom: 8px}
.eyebrow-5{font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; font-weight: 400; letter-spacing: 0.07em; text-transform: uppercase; line-height: 1.5; color: rgb(102, 97, 90); margin-top: 16px}
.eyebrow-6{font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; font-weight: 400; letter-spacing: 0.07em; text-transform: uppercase; line-height: 1.5; color: rgb(27, 25, 22); background: rgb(234, 231, 225); padding: 3px 8px; border-radius: 2px; white-space: nowrap}
.eyebrow-7{list-style: none; margin: 0px; padding: 0px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; font-weight: 400; letter-spacing: 0.07em; text-transform: uppercase; line-height: 1.5; color: rgb(102, 97, 90)}
.eyebrow-8{font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; font-weight: 400; letter-spacing: 0.07em; text-transform: uppercase; line-height: 1.5; color: rgb(102, 97, 90); margin: 0px 0px 10px}
.eyebrow-9{margin: 0px 0px clamp(24px, 3vw, 40px); font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; font-weight: 400; letter-spacing: 0.07em; text-transform: uppercase; line-height: 1.5; color: rgb(102, 97, 90)}
.field{height: 48px; padding: 0px 14px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: 16px; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; color: rgb(27, 25, 22); background: rgb(251, 250, 248); border: 1px solid rgb(138, 132, 123); border-radius: 2px; outline: none; transition: border-color 160ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 160ms cubic-bezier(0.2, 0.7, 0.2, 1); width: 100%}
.field-area{padding: 12px 14px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: 16px; line-height: 1.5; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; color: rgb(27, 25, 22); background: rgb(251, 250, 248); border: 1px solid rgb(138, 132, 123); border-radius: 2px; outline: none; transition: border-color 160ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 160ms cubic-bezier(0.2, 0.7, 0.2, 1); width: 100%; resize: vertical}
.h-setting{font-size: 22px; line-height: 1.3; letter-spacing: -0.008em; font-weight: 600; margin: 48px 0px 10px; color: rgb(27, 25, 22); scroll-margin-top: 80px; outline: none}
.mono{display: flex; align-items: center; justify-content: center; height: 34px; aspect-ratio: 306.14 / 94.96; background: repeating-linear-gradient(135deg, rgb(235, 232, 226) 0px, rgb(235, 232, 226) 10px, rgb(228, 224, 217) 10px, rgb(228, 224, 217) 20px); border-radius: 2px; font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; font-weight: 400; letter-spacing: 0.07em; text-transform: uppercase; line-height: 1.5; color: rgb(69, 65, 59); text-align: center; padding: 0px 8px}
.mono-2{margin: 4px 0px 0px; font-family: "Geist Mono", ui-monospace, monospace; font-size: 15px; color: rgb(27, 25, 22)}
.mono-3{font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; font-weight: 400; letter-spacing: 0.07em; text-transform: uppercase; line-height: 1.5; color: rgb(102, 97, 90); margin-left: 6px}
.mono-4{aspect-ratio: 16 / 10; border-radius: 2px; background: repeating-linear-gradient(135deg, rgb(235, 232, 226) 0px, rgb(235, 232, 226) 10px, rgb(228, 224, 217) 10px, rgb(228, 224, 217) 20px); box-shadow: rgba(27, 25, 22, 0.45) 0px 22px 44px -26px; font-family: "Geist Mono", ui-monospace, monospace; font-size: clamp(10px, 0.9vw, 12px); letter-spacing: 0.04em; line-height: 1.6; color: rgb(87, 82, 75); text-align: center; display: flex; align-items: center; justify-content: center; padding: 12px}
.nav-link{display: block; padding: 12px 2px; color: rgb(27, 25, 22); text-decoration-line: none; text-decoration-color: rgb(179, 34, 27); text-decoration-thickness: 2px; text-underline-offset: 9px}
.nav-link-current{display: block; padding: 12px 2px; color: rgb(27, 25, 22); text-decoration-line: underline; text-decoration-color: rgb(179, 34, 27); text-decoration-thickness: 2px; text-underline-offset: 9px}
.notes-aside{position: sticky; top: 88px}
.page{min-height: 100vh; display: flex; flex-direction: column; overflow-x: clip}
.prose{font-size: clamp(16px, 15px + 0.3vw, 18px); line-height: 1.62; color: rgb(54, 50, 45); margin: 0px 0px 16px; max-width: 66ch; text-wrap: pretty}
.prose-2{font-size: clamp(16px, 15px + 0.3vw, 18px); line-height: 1.62; color: rgb(27, 25, 22); margin: 0px 0px 16px; text-wrap: pretty}
.prose-tight{font-size: clamp(16px, 15px + 0.3vw, 18px); line-height: 1.6; color: rgb(54, 50, 45)}
.shell{max-width: 1360px; margin: 0px auto; padding-left: clamp(20px, 4vw, 56px); padding-right: clamp(20px, 4vw, 56px)}
.shell-2{max-width: 1360px; margin: 0px auto; padding-left: clamp(20px, 4vw, 56px); padding-right: clamp(20px, 4vw, 56px); min-height: 96px; display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap}
.shell-3{max-width: 1360px; margin: 0px auto; padding-left: clamp(20px, 4vw, 56px); padding-right: clamp(20px, 4vw, 56px); min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap}
.shell-4{max-width: 1360px; margin: 0px auto; padding: clamp(56px, 9vw, 144px) clamp(20px, 4vw, 56px) clamp(120px, 14vw, 200px)}
.shell-5{max-width: 1360px; margin: 0px auto; padding: clamp(40px, 6vw, 88px) clamp(20px, 4vw, 56px) clamp(120px, 14vw, 200px)}
.shell-6{max-width: 1360px; margin: 0px auto; padding: clamp(48px, 7vw, 112px) clamp(20px, 4vw, 56px) clamp(120px, 14vw, 200px)}
.shell-7{max-width: 1360px; margin: 0px auto; padding: clamp(64px, 10vw, 160px) clamp(20px, 4vw, 56px) clamp(120px, 14vw, 200px)}
.side-grid{max-width: 1360px; margin: 0px auto; padding: clamp(28px, 4vw, 56px) clamp(20px, 4vw, 56px) clamp(120px, 12vw, 176px); display: grid; grid-template-columns: 272px minmax(0px, 1fr); gap: clamp(24px, 5vw, 88px); align-items: start}
.skip{position: absolute; left: -9999px; top: 8px; background: rgb(27, 25, 22); color: rgb(255, 255, 255); padding: 10px 14px; z-index: 50}
.support-aside{grid-area: 1 / 2 / span 3; position: sticky; top: 120px; background: rgb(234, 231, 225); border-radius: 2px; padding: 28px; display: grid; gap: 24px}
.support-grid{display: grid; grid-template-columns: minmax(0px, 1fr) 340px; gap: clamp(120px, 12vw, 176px) clamp(40px, 6vw, 104px); margin-top: clamp(120px, 12vw, 176px); align-items: start}
.toc-filter{width: 100%; height: 44px; padding: 0px 12px; font-family: "Geist Mono", ui-monospace, monospace; font-size: 14px; color: rgb(27, 25, 22); background: rgb(251, 250, 248); border: 1px solid rgb(138, 132, 123); border-radius: 2px; outline: none; transition: border-color 160ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 160ms cubic-bezier(0.2, 0.7, 0.2, 1)}
.toc-link{display: block; padding: 6px 10px; border-radius: 2px; font-size: 14.5px; line-height: 1.35; text-decoration: none; transition: background-color 160ms cubic-bezier(0.2, 0.7, 0.2, 1); font-weight: 600; color: rgb(27, 25, 22); background: transparent}
.toc-link-2{display: block; padding: 6px 10px; border-radius: 2px; font-size: 14px; line-height: 1.35; text-decoration: none; transition: background-color 160ms cubic-bezier(0.2, 0.7, 0.2, 1); font-family: "Geist Mono", ui-monospace, monospace; color: rgb(179, 34, 27)}
.toc-panel{display: block; position: sticky; top: 88px; max-height: calc(-96px + 100vh); overflow: auto; padding: 0px 4px 24px 0px; background: transparent; border-radius: 2px; overscroll-behavior: contain}
.u-1{display: block; padding: 5px 10px; border-radius: 2px; font-size: 13.5px; line-height: 1.35; text-decoration: none; transition: background-color 160ms cubic-bezier(0.2, 0.7, 0.2, 1); color: rgb(69, 65, 59); font-weight: 400}
.u-10{border-top: 1px solid rgba(27, 25, 22, 0.24); padding: clamp(64px, 8vw, 120px) 0px clamp(40px, 5vw, 64px); display: grid; gap: clamp(48px, 6vw, 88px)}
.u-100{font-size: 16.5px; line-height: 1.58; color: rgb(54, 50, 45); margin: 0px 0px 32px}
.u-101{display: grid; gap: 20px; max-width: 720px}
.u-102{margin: 0px; font-size: 15px; font-weight: 600; color: rgb(143, 26, 20)}
.u-103{display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px}
.u-104{display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px}
.u-105{margin: clamp(40px, 5vw, 64px) 0px 0px auto; max-width: 34em; display: grid; gap: 16px}
.u-106{font-size: clamp(17px, 15.5px + 0.3vw, 19px); line-height: 1.62; color: rgb(54, 50, 45); text-wrap: pretty; margin: 0px}
.u-11{display: block; width: fit-content}
.u-12{display: block; height: clamp(96px, 11vw, 148px); width: auto; max-width: 100%; object-fit: contain}
.u-13{list-style: none; margin: 0px; padding: 0px; display: flex; flex-wrap: wrap; gap: 0px clamp(24px, 3vw, 48px); font-size: 16px; font-weight: 500}
.u-14{font-weight: 600; color: rgb(27, 25, 22)}
.u-15{font-size: 14px; color: rgb(143, 26, 20)}
.u-16{font-size: 14px; color: rgb(102, 97, 90)}
.u-17{display: block; padding: 10px 2px; color: rgb(27, 25, 22); text-decoration-line: none; text-decoration-color: rgb(179, 34, 27); text-decoration-thickness: 2px; text-underline-offset: 8px}
.u-18{display: flex; align-items: center; padding: 12px 0px}
.u-19{display: block; height: 64px; width: auto}
.u-2{display: block; padding: 6px 0px; color: rgb(27, 25, 22); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: rgba(27, 25, 22, 0.3); transition: text-decoration-color 180ms cubic-bezier(0.2, 0.7, 0.2, 1)}
.u-20{list-style: none; margin: 0px; padding: 0px; display: flex; gap: 4px clamp(8px, 2vw, 28px); font-size: 16px; font-weight: 500}
.u-21{color: rgb(27, 25, 22); text-decoration-color: rgba(27, 25, 22, 0.3)}
.u-22{display: flex; gap: 10px}
.u-23{padding: 12px 0px; border-bottom: 1px solid rgba(27, 25, 22, 0.14)}
.u-24{padding: 14px 0px 18px; border-top: 1px solid rgba(27, 25, 22, 0.24); font-size: 15.5px; line-height: 1.58; color: rgb(54, 50, 45)}
.u-25{display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 17px; font-weight: 500; color: rgb(27, 25, 22); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: rgba(27, 25, 22, 0.3); transition: text-decoration-color 180ms cubic-bezier(0.2, 0.7, 0.2, 1)}
.u-26{display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: 2px; box-shadow: rgba(27, 25, 22, 0.45) 0px 22px 44px -26px}
.u-27{color: rgb(27, 25, 22)}
.u-28{font-weight: 500; color: rgb(27, 25, 22)}
.u-29{display: flex; flex-wrap: wrap; gap: 4px 32px}
.u-3{font-size: clamp(26px, 2.4vw, 32px); line-height: 1.12; letter-spacing: -0.022em; font-weight: 600; margin: clamp(96px, 10vw, 144px) 0px 20px; padding-top: 18px; border-top: 1px solid rgba(27, 25, 22, 0.24); color: rgb(27, 25, 22); scroll-margin-top: 80px; outline: none; text-wrap: balance}
.u-30{display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 17px; font-weight: 500; color: rgb(179, 34, 27); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: rgba(179, 34, 27, 0.4); transition: text-decoration-color 180ms cubic-bezier(0.2, 0.7, 0.2, 1)}
.u-31{position: sticky; top: 0px; z-index: 20; background: rgb(244, 242, 238); border-bottom: 1px solid rgba(27, 25, 22, 0.14)}
.u-32{display: flex; align-items: center; gap: 16px; min-width: 0px}
.u-33{display: flex; align-items: center; padding: 6px 0px}
.u-34{display: block; height: 44px; width: auto}
.u-35{list-style: none; margin: 0px; padding: 0px; display: flex; gap: 4px clamp(8px, 2vw, 28px); font-size: 15px; font-weight: 500}
.u-36{margin: 0px 0px 20px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid rgba(27, 25, 22, 0.24)}
.u-37{min-width: 0px; max-width: 760px}
.u-38{margin: 0px 0px clamp(28px, 3vw, 40px)}
.u-39{margin: 4px 0px 0px; font-size: 15px; font-weight: 500}
.u-4{background: rgb(244, 242, 238)}
.u-40{margin: 0px; font-size: clamp(56px, 8.4vw, 120px); font-weight: 620; letter-spacing: -0.045em; line-height: 0.92}
.u-41{font-size: 22px; font-weight: 600; letter-spacing: -0.022em; line-height: 1.12; margin: 0px 0px 16px; padding-bottom: 14px; border-bottom: 1px solid rgba(27, 25, 22, 0.24)}
.u-42{margin: 0px; padding-left: 18px; display: grid; gap: 10px; font-size: 16.5px; line-height: 1.58; color: rgb(54, 50, 45)}
.u-43{grid-column: 1; min-width: 0px}
.u-44{font-size: clamp(26px, 2.4vw, 32px); font-weight: 600; letter-spacing: -0.022em; line-height: 1.12; margin: 0px 0px 12px}
.u-45{background: rgb(244, 242, 238); line-height: 0}
.u-46{display: block; width: 100%; height: auto; aspect-ratio: 2752 / 1536}
.u-47{display: grid; gap: clamp(32px, 4vw, 48px)}
.u-48{margin: 0px; max-width: 13em; font-size: clamp(46px, 7.4vw, 116px); font-weight: 600; letter-spacing: -0.04em; line-height: 0.97; text-wrap: balance}
.u-49{margin: 0px 0px 0px auto; max-width: 31em; font-size: clamp(17px, 15.5px + 0.3vw, 19px); line-height: 1.62; color: rgb(54, 50, 45); text-wrap: pretty}
.u-5{list-style: none; margin: 2px 0px 10px 10px; padding: 0px 0px 0px 10px; border-left: 1px solid rgba(27, 25, 22, 0.24); display: grid; gap: 0px}
.u-50{margin: clamp(96px, 12vw, 176px) calc(50% - 50vw) 0px clamp(0px, 8vw, 120px)}
.u-51{background: rgb(222, 218, 210); padding: clamp(28px, 6vw, 104px) clamp(20px, 7vw, 128px) clamp(28px, 6vw, 104px) clamp(20px, 6vw, 104px)}
.u-52{display: grid; gap: clamp(140px, 15vw, 200px)}
.u-53{display: grid; gap: 18px}
.u-54{display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px}
.u-55{margin: 0px; font-size: clamp(72px, 10.4vw, 136px); font-weight: 620; letter-spacing: -0.045em; line-height: 0.9}
.u-56{padding-bottom: 10px; line-height: 0}
.u-57{margin: clamp(32px, 4vw, 48px) calc(50% - 50vw) 0px 0px}
.u-58{background: rgb(222, 218, 210); padding: clamp(28px, 5.4vw, 96px) clamp(20px, 6vw, 112px) clamp(40px, 6.4vw, 112px) clamp(20px, 5.4vw, 96px)}
.u-59{position: relative; padding-right: 14%}
.u-6{font-size: 15px; font-weight: 600; color: rgb(27, 25, 22)}
.u-60{position: absolute; right: 0px; bottom: -8%; width: 21%; height: auto; aspect-ratio: 1290 / 2796; object-fit: cover; border-radius: clamp(6px, 1.1vw, 16px); box-shadow: rgba(27, 25, 22, 0.45) 0px 22px 44px -26px}
.u-61{margin: clamp(40px, 5vw, 64px) 0px 0px auto; max-width: 34em; display: grid; gap: 20px}
.u-62{margin: 0px; font-size: clamp(17px, 15.5px + 0.3vw, 19px); line-height: 1.62; color: rgb(54, 50, 45); text-wrap: pretty}
.u-63{margin: 4px 0px 0px; font-size: 15px; line-height: 1.55; color: rgb(102, 97, 90); text-wrap: pretty}
.u-64{display: block; padding: 10px 2px; color: rgb(27, 25, 22); text-decoration-line: underline; text-decoration-color: rgb(179, 34, 27); text-decoration-thickness: 2px; text-underline-offset: 8px}
.u-65{display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 0px 16px; background: rgb(234, 231, 225); border: 0px; border-radius: 2px; font-style: inherit; font-variant: inherit; font-weight: 600; font-stretch: inherit; font-size: 16px; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; color: rgb(27, 25, 22); cursor: pointer; position: sticky; top: 72px; z-index: 10}
.u-66{display: flex; align-items: center; gap: 12px; min-width: 0px}
.u-67{font-size: 13px; color: rgb(102, 97, 90); margin: 8px 0px 20px; line-height: 1.45}
.u-68{position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px)}
.u-69{list-style: none; margin: 0px; padding: 0px; display: grid; gap: 1px}
.u-7{display: grid; gap: 6px}
.u-70{display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px}
.u-71{margin: 0px; display: grid; gap: 10px}
.u-72{font-size: clamp(64px, 8vw, 112px); font-weight: 620; letter-spacing: -0.045em; line-height: 0.9}
.u-73{font-size: clamp(24px, 2.4vw, 32px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; color: rgb(54, 50, 45)}
.u-74{padding-bottom: 6px; line-height: 0}
.u-75{display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 0px 24px; margin: clamp(32px, 4vw, 48px) 0px 28px; border-top: 1px solid rgba(27, 25, 22, 0.24)}
.u-76{font-size: clamp(17px, 15.5px + 0.3vw, 19px); line-height: 1.6; color: rgb(54, 50, 45); margin: 0px; max-width: 62ch; text-wrap: pretty}
.u-77{margin: 12px 0px 32px}
.u-78{background: rgb(222, 218, 210); padding: clamp(16px, 3vw, 40px)}
.u-79{margin: 28px 0px; padding: 20px 24px 6px; background: rgb(234, 231, 225); border-radius: 2px; max-width: 66ch}
.u-8{margin: 0px 0px 20px; padding-left: 20px; display: grid; gap: 8px; max-width: 66ch}
.u-80{font-size: 15px; font-weight: 600}
.u-81{list-style: none; margin: 0px 0px 24px; padding: 0px}
.u-82{display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; font-weight: 500; color: rgb(27, 25, 22); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: rgba(27, 25, 22, 0.3); transition: text-decoration-color 180ms cubic-bezier(0.2, 0.7, 0.2, 1)}
.u-83{margin: 0px; font-size: clamp(56px, 7.4vw, 104px); font-weight: 620; letter-spacing: -0.045em; line-height: 0.92}
.u-84{font-size: clamp(17px, 15.5px + 0.3vw, 19px); line-height: 1.62; color: rgb(54, 50, 45); text-wrap: pretty; margin: 28px 0px 0px; max-width: 62ch}
.u-85{margin-top: clamp(96px, 10vw, 144px); padding-top: 18px; border-top: 1px solid rgba(27, 25, 22, 0.24); display: grid; gap: 14px}
.u-86{margin: 0px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; scroll-margin-top: 80px}
.u-87{font-size: clamp(26px, 2.4vw, 32px); font-weight: 600; letter-spacing: -0.022em; line-height: 1.1}
.u-88{font-size: clamp(17px, 15.5px + 0.3vw, 19px); line-height: 1.62; color: rgb(54, 50, 45); text-wrap: pretty; margin: 0px; max-width: 62ch}
.u-89{margin: 0px; padding-left: 20px; display: grid; gap: 8px; max-width: 62ch; font-size: clamp(17px, 15.5px + 0.3vw, 19px); line-height: 1.62; color: rgb(54, 50, 45); text-wrap: pretty}
.u-9{flex: 1 0 auto}
.u-90{display: grid; gap: clamp(28px, 3.4vw, 44px)}
.u-91{margin: 0px 0px 0px auto; max-width: 34em; font-size: clamp(17px, 15.5px + 0.3vw, 19px); line-height: 1.62; color: rgb(54, 50, 45); text-wrap: pretty}
.u-92{grid-column: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 40px clamp(32px, 4vw, 56px); min-width: 0px}
.u-93{grid-column: 1 / -1; font-size: 16.5px; line-height: 1.58; color: rgb(54, 50, 45); margin: 0px; max-width: 62ch}
.u-94{font-size: 19px; line-height: 1.45; font-weight: 500; letter-spacing: -0.01em; color: rgb(27, 25, 22); margin: 0px; text-wrap: pretty}
.u-95{border-top: 1px solid rgba(27, 25, 22, 0.24); padding-top: 20px}
.u-96{font-size: 16px; line-height: 1.55; color: rgb(54, 50, 45); margin: 0px}
.u-97{font-size: 16.5px; line-height: 1.58; color: rgb(54, 50, 45); margin: 0px 0px 28px; max-width: 62ch}
.u-98{list-style: none; margin: 0px; padding: 0px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 0px 28px}
.u-99{font-size: 16.5px; line-height: 1.58; color: rgb(54, 50, 45); margin: 20px 0px 0px; max-width: 62ch}
/* --- hover and focus states ---------------------------------------------
   The prototype expressed these as style-hover / style-focus attributes that
   its runtime compiled into generated classes. They are authored here as real
   CSS, declaration for declaration. Counts from the prototype template:
   7 distinct hover declarations (112 uses), 3 distinct focus (102 uses).     */

/* the in-heading "#" anchor: invisible until the heading is hovered or the
   link is focused (92 uses in the documentation) */
h2:hover .anchor-mark,
h3:hover .anchor-mark,
.anchor-mark:hover,
.anchor-mark:focus-visible { opacity: 1 }

/* primary navigation and footer links (8 uses) */
.nav-link:hover,
.nav-link-current:hover { text-decoration-color: #b3221b; text-decoration-thickness: 2px; color: #1b1916 }

/* the two accent links — "Documentation →" (2 uses) */
.accent-link:hover { text-decoration-color: #b3221b; text-decoration-thickness: 2px; color: #b3221b }

/* contents-list links (6 uses) */
.toc-link:hover { text-decoration-line: underline; text-decoration-color: #b3221b }

/* contents rows and filter results (3 uses) */
.toc-link:hover,
.result-row:hover { background: #eae7e1; color: #1b1916 }

/* the submit button (1 use) */
.btn:hover { background: #8f1a14 }

/* every form control — 9 in the prototype: the 8 support fields and the
   documentation filter */
.field:focus,
.field-area:focus,
.toc-filter:focus { border-color: #1b1916; box-shadow: 0 0 0 2px #f4f2ee, 0 0 0 4px #b3221b; outline: none }

/* the support form's screenshot field and its honeypot (FormSubmit `_honey`:
   a filled value makes the service drop the submission silently) */
.field-file{font: inherit; font-size: 15px; color: rgb(27, 25, 22); max-width: 100%}
.field-file:focus-visible{outline: 2px solid #b3221b; outline-offset: 2px}
.hp{display: none}

/* the Lykia logo in the theme headers (/themes, /themes/lykia), 612×190 WebP
   rasterised from the store's own SVG so its Didot lettering renders everywhere */
.lykia-mark{display: block; height: 34px; width: auto}

/* the skip link reveals itself on focus */
.skip:focus { left: 8px }

/* --- the narrow layout -------------------------------------------------
   The prototype re-rendered its markup when the viewport crossed 1024px.
   The markup here is the wide one, which contains every element; these rules
   reproduce what the prototype showed below that width. */
@media (max-width: 1023px) {
  /* the sidebar columns collapse to one */
  .side-grid, .support-grid { grid-template-columns: minmax(0, 1fr) }
  /* the release-notes contents list is not shown narrow: the prototype did not
     render it at all below this width */
  .notes-aside { display: none }
  /* The contents panel keeps its narrow styling from the prototype, but it is
     OPEN by default rather than closed. The prototype closed it with
     JavaScript after mount, which moves the whole article and cost a 0.741
     cumulative layout shift; a CSS default that already matches the first
     paint shifts nothing, and the panel stays reachable with JavaScript off.
     The button only appears once site.js has marked the document. */
  #toc { position: static; max-height: none; padding: 20px; background: #eae7e1 }
  #toc[data-collapsed] { display: none }
  [aria-controls="toc"] { display: none }
  html.js [aria-controls="toc"] { display: flex }
  /* the support sidebar is placed by grid-area in the two-column layout; in one
     column it must flow normally or it lands in a column that is not there */
  .support-aside { grid-area: auto; position: static }
}
@media (min-width: 1024px) {
  /* the disclosure button belongs to the narrow layout only */
  [aria-controls="toc"] { display: none }
}
.sv{margin:6px 0 28px;max-width:860px}
.sv__frame{position:relative;aspect-ratio:16 / 10;overflow:hidden;border-radius:2px;background:rgb(242, 238, 233);box-shadow:rgba(27, 25, 22, 0.45) 0px 22px 44px -26px}
.sv__frame img,.sv__frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.sv__frame video{opacity:0;transition:opacity .35s ease}
.sv__frame video.is-playing{opacity:1}
.sv__toggle{position:absolute;right:12px;bottom:12px;z-index:1;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 16px;border:0;border-radius:22px;background:rgba(27, 25, 22, 0.78);color:rgb(255, 255, 255);font:500 13px/1 Geist, system-ui, sans-serif;letter-spacing:.02em;cursor:pointer}
.sv__toggle:hover{background:rgb(27, 25, 22)}
.sv__toggle:focus-visible{outline:2px solid rgb(255, 255, 255);outline-offset:2px;box-shadow:0 0 0 4px rgb(27, 25, 22)}
.sv__toggle[hidden]{display:none}
.sv__caption{font-family:"Geist Mono", ui-monospace, monospace;font-size:12px;letter-spacing:.04em;line-height:1.55;color:rgb(102, 97, 90);margin-top:12px}
@media (prefers-reduced-motion:reduce){.sv__frame video,.sv__toggle{display:none !important}}
.ts-pair{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:20px;align-items:start;max-width:860px;margin:6px 0 28px}
.ts-pair .sv{margin:0}
.ts-editor{margin:0}
.ts-editor img{display:block;width:100%;height:auto;border-radius:6px;background:rgb(255,255,255);box-shadow:rgba(27,25,22,0.45) 0px 22px 44px -26px}
@media (max-width:720px){.ts-pair{grid-template-columns:minmax(0,1fr)}.ts-pair .ts-editor{max-width:276px}}
.toc-group{display:flex;align-items:center;gap:2px}
.toc-group .toc-link{flex:1 1 auto;min-width:0}
.toc-toggle{display:none;flex:none;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:2px;background:transparent;color:rgb(69,65,59);cursor:pointer}
.js .toc-toggle{display:inline-flex}
.toc-toggle:hover{background:rgba(27,25,22,0.06)}
.toc-toggle:focus-visible{outline:2px solid rgb(27,25,22);outline-offset:1px}
.toc-toggle svg{transition:transform 160ms cubic-bezier(0.2,0.7,0.2,1)}
.toc-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.u-5[hidden]{display:none}
.toc-link[aria-current="page"]{background:rgba(27,25,22,0.06)}
[data-toc]{scroll-margin-top:96px}
#toc .u-1:hover{color:rgb(69,65,59);text-decoration-line:underline;text-decoration-color:currentColor}
#toc .u-1[aria-current="location"]{color:#b3221b;box-shadow:inset 2px 0 0 #b3221b}
.u-37 .h-setting~.h-setting{margin-top:56px;padding-top:32px;border-top:1px solid rgba(27,25,22,0.24)}
@media (max-width:1023px){.ts-pair--video{grid-template-columns:minmax(0,1fr)}.ts-pair--video .ts-editor{max-width:276px}}
@media (min-width:1024px){.u-37{max-width:none}.u-37>:not(.ts-pair):not(.sv):not(.h-setting){max-width:70ch}.u-37 .ts-pair{grid-template-columns:minmax(0,1fr) 276px;gap:24px;max-width:none}.u-37>.sv{max-width:860px}}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media (prefers-reduced-motion:reduce){.toc-toggle svg{transition:none}}
.u-38 a{display:inline-block;padding:4px 0;min-height:24px}
.anchor-mark{display:inline-block;min-width:24px;min-height:24px;line-height:24px;text-align:center}
.h-setting:has(>.anchor-alias){position:relative}
.anchor-alias{position:absolute;top:0;left:0;scroll-margin-top:97px}
/* sticky stack: scroll padding = stack height + 16px, so the focus ring and a field's
   first line clear it. Main: header 96, 150 once the nav wraps (below 604; 639 leaves room
   for font differences). Docs: header 65, contents bar below it under 1024; below 576 the
   header wraps to 113, so the bar moves down flush under it (bottom edge 161). */
header.u-4{position:sticky;top:0;z-index:20}
html:has(header.u-4){scroll-padding-top:112px}
@media (max-width:1023px){
  html{scroll-padding-top:136px}
  .u-3,.u-86,.h-setting,[data-toc]{scroll-margin-top:0}
  .anchor-alias{scroll-margin-top:1px}
}
@media (max-width:639px){html:has(header.u-4){scroll-padding-top:166px}}
@media (max-width:575px){
  .u-65{top:113px}
  html{scroll-padding-top:177px}
}