:root{--navy:#052e5b;--blue:#1978b9;--pale:#eaf6fb;--ink:#061d48;--gold:#e89413;--line:#c8d9e7;--serif:Georgia,'Times New Roman',serif;--sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:var(--sans);background:#fff}.wrap{max-width:1320px;margin:auto;padding-left:30px;padding-right:30px}a{color:inherit}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.site-header{height:98px;background:#fff;position:relative;z-index:3}.nav{height:100%;display:flex;align-items:center;justify-content:space-between}.ocker-logo{font-family:var(--serif);font-size:52px;line-height:.8;font-weight:bold;text-decoration:none;letter-spacing:-3px;display:inline-flex;align-items:center;position:relative;padding-left:9px;color:#061a43}.ocker-logo .o{font-size:64px}.ocker-logo small{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:0;color:#4774a6;position:absolute;white-space:nowrap;left:11px;top:56px}.hat{width:57px;height:21px;background:#af6a31;border:2px solid #613512;border-radius:55% 55% 25% 25%;position:absolute;left:9px;top:-15px;transform:rotate(-8deg);z-index:1}.hat:before{content:"";position:absolute;width:67px;height:8px;border-radius:50%;background:#b9743c;border:2px solid #613512;left:-7px;top:13px}.hat i,.hat b,.hat em,.hat strong{width:3px;height:18px;background:#765222;position:absolute;border-radius:3px;top:17px}.hat i{left:8px;transform:rotate(10deg)}.hat b{left:28px}.hat em{left:47px;transform:rotate(-12deg)}.hat strong{width:5px;height:5px;background:#d9b766;border:1px solid #765222;border-radius:50%;top:30px;left:7px}.nav nav{display:flex;align-items:center;gap:31px;font-size:14px;color:#215a93}.nav nav a{text-decoration:none}.nav nav a:hover,.text-link:hover{text-decoration:underline}.github{border:1px solid #b7cbe0;border-radius:7px;padding:10px 13px;color:#071d44!important;font-weight:700}.language select{border:1px solid #aec8de;border-radius:6px;background:white;color:#174d80;padding:8px;font:inherit}.hero{position:relative;overflow:hidden;background:linear-gradient(105deg,#f8fdff 0%,#dff3fb 48%,#d7eefa 100%)}.hero-backdrop{position:absolute;inset:0;background:radial-gradient(circle at 13% 93%,#e5b277 0 2%,transparent 14%),radial-gradient(circle at 30% 108%,#6c9e6a 0 1.5%,transparent 19%),radial-gradient(circle at 85% 94%,#b8d9e8 0 7%,transparent 30%),linear-gradient(165deg,transparent 55%,rgba(49,117,152,.2) 100%);opacity:.65}.hero-layout{min-height:660px;display:grid;grid-template-columns:38% 62%;align-items:center;position:relative;z-index:1;gap:20px}.hero-copy{padding:62px 0}.eyebrow{font-size:12px;font-weight:800;letter-spacing:3px;color:#3b70aa;margin:0 0 20px}.hero h1,.freedom h2,.split h2,.founder h2{font:700 clamp(42px,4.5vw,72px)/.98 var(--serif);letter-spacing:-3px;margin:0 0 22px}.lead{font:21px/1.45 var(--serif);color:#28609a;max-width:455px;margin:0 0 26px}.actions{display:flex;gap:13px;align-items:center;margin:0 0 16px}.button{border-radius:6px;padding:14px 17px;text-decoration:none;font-weight:750;font-size:14px}.button.primary{background:#07375e;color:#fff;box-shadow:0 9px 20px #678ba855}.button.primary b{font-size:20px;padding-left:10px}.button.outline{color:#0c3762;border:2px solid #163e68;padding:12px 16px}.hero-copy>small{color:#507aa3;font-family:var(--serif)}.preview{width:100%;height:560px;border:9px solid #d8eaf3aa;border-radius:17px;background:#dceef7d9;box-shadow:0 16px 30px #2d6a942f;overflow:hidden;position:relative}.appbar{height:60px;background:#fff;display:flex;align-items:center;gap:13px;padding:10px 15px;color:#0a3b73;box-shadow:0 2px 6px #3f779122}.appbar b{font-size:29px}.appbar strong{font:700 22px var(--serif);color:#061a43}.appbar>span{font-size:10px;background:#e9f5fa;padding:6px 10px;border-radius:6px}.appbar label{margin-left:auto;font-size:10px;color:#5078a2;background:#f8fdff;padding:9px 12px;border-radius:5px;min-width:170px}.appbar i{background:white;color:#1b5f9d;font-style:normal;font-weight:700;font-size:20px}.chronology{height:calc(100% - 60px);position:relative;background:linear-gradient(180deg,#e9f6fb,#cde6f1)}.axis{position:absolute;left:50%;top:42px;bottom:45px;border-left:2px solid #78b0cc;display:flex;flex-direction:column;justify-content:space-between;font-size:10px;color:#3e79a9}.axis span{position:relative;left:-24px;width:50px;white-space:nowrap}.axis b{width:15px;height:15px;border:4px solid #43a8d3;background:#fff;border-radius:50%;position:relative;left:-9px}.chron-card{position:absolute;width:33%;min-height:139px;padding:14px 17px;background:#fff;border-radius:8px;box-shadow:0 6px 14px #2b628425;font-family:var(--serif)}.c1{left:3%;top:36px}.c2{right:2%;top:99px}.c3{left:11%;bottom:48px}.c4{right:6%;bottom:19px}.card-top{display:flex;justify-content:space-between;font:700 10px var(--sans)}.card-top span:first-child{padding:4px 8px;border-radius:12px}.common .card-top span:first-child{background:#e4f2d7;color:#4f8041}.conflict .card-top span:first-child{background:#ffe6df;color:#d85b36}.chron-card strong{display:block;font-size:15px;line-height:1.15;margin:9px 0}.chron-card p{margin:0 0 9px;font-size:11px;line-height:1.35;color:#286095}.chron-card footer{font:10px var(--sans);color:#3974ad;border-top:1px solid #e2eef5;padding-top:7px}.chron-card footer small{float:right;background:#e8f4fa;padding:3px}.arrow{position:absolute;font-size:75px;color:#40a06c;transform:rotate(-21deg);z-index:0}.a1{top:125px;left:46%}.a2{bottom:106px;left:45%;color:#e49618;transform:rotate(145deg)}.sticky,.precedent{position:absolute;z-index:2;padding:22px 9px 8px;font:700 10px/1.3 var(--sans);box-shadow:3px 5px 10px #986d214d}.sticky{right:1%;top:135px;width:95px;height:100px;background:#ffe67c;transform:rotate(-4deg)}.precedent{right:1%;bottom:93px;width:100px;min-height:78px;background:#f4c78e}.mini{position:absolute;right:11px;border:0;border-radius:5px;padding:8px 13px;font:700 10px var(--sans)}.precedent-btn{bottom:44px;background:#fff;color:#1a6c9c}.note-btn{bottom:9px;background:#ffe27d;color:#1b5f87}.authority{position:absolute;left:1%;top:46%;font-size:21px;color:#16629c;background:#cce7f7;padding:13px 8px;border-radius:0 8px 8px 0;text-align:center}.authority small{font-size:8px}.steps{display:grid;grid-template-columns:repeat(3,1fr);padding-top:17px;padding-bottom:17px}.steps article{display:flex;align-items:center;gap:24px;padding:6px 30px;border-right:1px solid #bed0df}.steps article:last-child{border:0}.steps b{font:48px var(--serif);color:#e7950a}.steps h2{font:700 19px var(--serif);margin:0}.steps p{margin:3px 0;color:#4275a7;font:14px var(--serif)}.freedom{border-block:1px solid #d9e4ed;background:#fff}.freedom-inner{display:flex;align-items:center;gap:26px;padding-top:26px;padding-bottom:26px}.lock{font-size:50px;color:#12487e}.freedom h2{font-size:43px;margin:0 0 5px}.freedom p{font:18px/1.4 var(--sans);color:#225f9e;max-width:1000px;margin:0}.split{display:grid;grid-template-columns:1fr 1fr;padding-top:43px;padding-bottom:32px}.split article{min-height:350px;padding:0 40px 0 0}.split article+article{border-left:1px solid #c6d6e2;padding-left:40px;padding-right:0}.split h2{font-size:48px;max-width:490px}.split p{font:18px/1.35 var(--serif);color:#26639f;max-width:390px}.evidence-mini{margin-top:30px;height:130px;display:flex;gap:15px;align-items:end;position:relative}.evidence-mini>span:first-child{width:150px;height:92px;background:#fff;border-radius:5px;box-shadow:0 4px 12px #426a8a28;padding:15px;color:#c64a3b}.evidence-mini b{color:#21689d;font-size:28px;align-self:center}.evidence-mini i{font-style:normal;font-size:45px;color:#4b93c4}.evidence-mini .smallcard{width:180px;height:105px;background:#fff;box-shadow:0 4px 11px #426a8a28;border-radius:7px;padding:14px;font:700 13px var(--serif);color:#173d6b}.evidence-mini .smallcard small{color:#4490bc}.developer pre{background:#072a45;color:#f4f6ec;border-radius:7px;padding:21px;max-width:455px;box-shadow:0 8px 15px #123d5e33;overflow:auto}.developer code{font:13px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace}.developer code i{color:#7dbe74}.developer code b{color:#f4bc31}.tech{font-size:13px!important;color:#296bab!important}.text-link{color:#0a4c89;font-weight:700}.why{display:grid;grid-template-columns:1fr 1.4fr 1fr;border-top:1px solid #c7d6e1;padding-top:32px;padding-bottom:32px}.why>div{padding:0 33px;border-right:1px solid #c7d6e1}.why>div:first-child{padding-left:0}.why>div:last-child{border:0}.why .eyebrow{font-size:10px;margin-bottom:6px}.ocker-word{font:700 64px/.8 var(--serif);margin:0 0 8px;letter-spacing:-4px}.why b{font:700 14px var(--serif);color:#285e9b}.why h3{font:24px/1.15 var(--serif);margin:11px 0}.why small{color:#5780ab;font-size:10px}.case{text-align:center}.case h3{font-size:20px}.case p{font:22px/1.1 var(--serif);margin:4px}.founder{background:#eef7fb;border-radius:6px;display:grid;grid-template-columns:35% 1fr;gap:25px;padding-top:30px;padding-bottom:30px;margin-bottom:35px}.founder h2{font-size:37px;margin:5px 0 0}.founder p{font:19px/1.5 var(--serif);color:#245e98;margin:0}.quote{font:65px var(--serif);color:#e79413;line-height:.3}.sponsor{background:linear-gradient(100deg,#042a53,#063d71 55%,#042b58);color:#fff;padding:24px 0 19px}.sponsor p{font-size:18px;font-weight:700;margin:0 0 15px}.sponsor p a{color:#fff}.sponsor-row{display:flex;align-items:center;gap:18px;border-bottom:1px solid #7696b5;padding-bottom:18px;margin-bottom:8px}.sponsor-row img{width:112px;height:106px;object-fit:contain;filter:brightness(0) invert(1)}.sponsor-brand{font-size:43px;font-weight:800;line-height:.9;border-left:1px solid #95aac0;padding-left:26px}.sponsor-brand sup{font-size:14px}.sponsor-brand small{display:block;font-size:22px;margin-top:9px}.visit{margin-left:auto;border:2px solid #fff;border-radius:8px;padding:12px 20px;color:white;text-decoration:none;font-weight:700}.sponsor>div>small{font-size:10px}.footer{padding:25px 0;background:#fff;color:#2d6298}.footer .wrap{display:flex;align-items:center;justify-content:space-between}.footer .ocker-logo{font-size:35px;transform:scale(.82);transform-origin:left center;width:169px}.footer .ocker-logo .o{font-size:42px}.footer .ocker-logo small{display:none}.footer>div>div{display:flex;align-items:center;gap:12px;font:14px var(--serif)}.footer nav{display:flex;gap:25px;font:14px var(--serif)}.footer nav a{text-decoration:none}@media(max-width:900px){.site-header{height:78px}.nav{padding-inline:18px}.ocker-logo{font-size:40px}.ocker-logo .o{font-size:49px}.ocker-logo small{display:none}.nav nav{gap:12px}.nav nav>a:not(.github){display:none}.language select{max-width:90px}.hero-layout{grid-template-columns:1fr;min-height:0;padding-top:25px}.hero-copy{padding:24px 0 0}.hero h1{font-size:49px}.preview{height:490px;margin:20px 0 28px}.steps{grid-template-columns:1fr;padding-block:15px}.steps article{border:0;border-bottom:1px solid #d6e0e8;padding:12px 0}.steps article:last-child{border:0}.split{grid-template-columns:1fr;gap:32px}.split article{padding:0;min-height:0}.split article+article{padding:32px 0 0;border:0;border-top:1px solid #c6d6e2}.why{grid-template-columns:1fr}.why>div,.why>div:first-child{padding:22px 0;border:0;border-bottom:1px solid #c7d6e1}.why>div:last-child{border:0}.founder{grid-template-columns:1fr}.sponsor-brand{font-size:27px}.sponsor-brand small{font-size:16px}.sponsor-row img{width:74px;height:75px}.visit{padding:9px;font-size:12px}.footer .wrap{display:block}.footer nav{margin-top:20px;gap:15px}}@media(max-width:560px){.wrap{padding-inline:20px}.hero h1{font-size:43px}.lead{font-size:19px}.actions{align-items:stretch;flex-direction:column}.button{text-align:center}.preview{height:390px;border-width:5px}.appbar{padding:8px;gap:6px;height:48px}.appbar strong{font-size:15px}.appbar>span,.appbar label,.appbar i{display:none}.chronology{height:calc(100% - 48px)}.chron-card{width:44%;padding:8px;min-height:102px}.chron-card strong{font-size:11px;margin:5px 0}.chron-card p{font-size:8px}.chron-card footer{font-size:7px}.c1{left:2%;top:18px}.c2{right:1%;top:76px}.c3{left:4%;bottom:28px}.c4{right:1%;bottom:2px}.axis{left:49%;top:15px;bottom:18px;font-size:7px}.sticky,.precedent,.authority,.arrow{display:none}.split h2,.freedom h2{font-size:38px}.freedom-inner{align-items:flex-start;gap:14px}.lock{font-size:35px}.freedom p,.split p{font-size:16px}.evidence-mini{transform:scale(.85);transform-origin:left}.sponsor-row{flex-wrap:wrap}.visit{margin-left:0}.footer .ocker-logo{margin-left:-15px}}
/* Protect narrow screens from intrinsic code and content widths. */
.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.split article{min-width:0}
@media(max-width:900px){.split{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
/* The real wordmark carries the cork hat, including its deliberately wonky details. */
.ocker-logo{display:block;letter-spacing:0;padding-left:0}
.ocker-logo img{display:block;width:158px;height:auto}
.ocker-logo small{left:6px;top:auto;bottom:-17px;font-size:10px;letter-spacing:0}
.footer .ocker-logo{width:186px;transform:none;margin:0}
.footer .ocker-logo img{width:150px}
@media(max-width:900px){.ocker-logo img{width:133px}.footer .ocker-logo{width:175px}.footer .ocker-logo img{width:140px}}
@media(max-width:560px){.footer .ocker-logo{margin:0}.footer .ocker-logo img{width:133px}}

.mini{text-decoration:none;display:inline-block}

/* Keep the wordmark and its full name in the header's normal flow. */
.site-header{height:auto;min-height:116px}
.nav{min-height:116px;gap:28px;padding-block:18px}
.ocker-logo{flex:none;line-height:normal}
.ocker-logo small{position:static;display:block;white-space:normal;max-width:290px;line-height:1.4;margin-top:8px;font-size:11px}
.nav nav{flex-wrap:wrap;justify-content:flex-end;gap:18px}
.hero-layout{grid-template-columns:minmax(0,38fr) minmax(0,62fr)}
.hero h1,.freedom h2,.split h2,.founder h2{line-height:1.1;letter-spacing:-.035em}
.hero-copy,.freedom-inner>div{min-width:0}
.lock{width:46px;height:46px;flex:none}
.case-brand{display:block;width:96px;height:96px;object-fit:contain;margin:12px auto}
.evidence-mini>span:first-child{height:auto;min-height:100px;overflow-wrap:anywhere}
.evidence-mini{height:auto;min-height:145px}
.evidence-mini .smallcard{height:auto;min-height:105px}
.footer .ocker-logo small{display:none}
.spec-page{padding-top:40px;padding-bottom:40px}
@media(max-width:1100px){.nav nav{gap:13px}.ocker-logo small{max-width:240px}}
@media(max-width:900px){.site-header,.nav{min-height:90px}.nav{gap:15px;padding-block:16px}.nav .ocker-logo small{display:none}.hero-layout{grid-template-columns:minmax(0,1fr)}.nav nav{gap:12px}}
@media(max-width:560px){.lock{width:32px;height:32px}.nav{gap:10px}.nav nav{gap:8px}.nav .github{padding:8px;font-size:12px}.language select{max-width:85px}.evidence-mini{gap:10px;transform:none}.evidence-mini>span:first-child,.evidence-mini .smallcard{flex:1;min-width:0}.evidence-mini i{font-size:28px}.evidence-mini b{font-size:20px}.sponsor-brand{min-width:0;overflow-wrap:anywhere;flex:1;font-size:clamp(20px,5vw,27px);padding-left:14px}.footer nav{flex-wrap:wrap}}
/* Give sponsor branding its own row on phones; the visit link sits beneath it. */
@media(max-width:560px){.sponsor-row{display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px}.sponsor-row img{width:64px;height:64px}.sponsor-brand{font-size:clamp(15px,4.5vw,22px);line-height:1.15;overflow-wrap:normal;word-break:normal}.sponsor-brand small{font-size:15px;line-height:1.35}.visit{grid-column:1/-1;justify-self:start}.developer pre{max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere}.tech{overflow-wrap:anywhere}}
.chron-card,.evidence-mini .smallcard{overflow-wrap:anywhere}
.card-top{gap:4px;align-items:flex-start}
.card-top span:first-child{min-width:0;overflow-wrap:anywhere}
.card-top span:last-child{flex:none}
/* Keep the illustrated annotations beside the reading surface on small tablets. */
@media(min-width:901px) and (max-width:1100px){.sticky,.precedent{right:0;width:77px;font-size:8px}.c2,.c4{right:15%;width:35%}.appbar label{display:none}}
@media(min-width:901px) and (max-width:1100px){.hero-layout{grid-template-columns:minmax(0,1fr);padding-top:25px}.hero-copy{padding:24px 0 0;max-width:720px}.hero h1{font-size:55px}.preview{margin:20px 0 28px}.c2,.c4{right:15%;width:33%}}
/* Translations can make the illustrative cards taller. Let their rows grow. */
@media(max-width:1100px){.preview{height:auto}.chronology{height:auto;min-height:450px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 64px;padding:28px 28px 90px}.chron-card{position:relative;inset:auto;width:auto;min-width:0}.c2,.c4{right:auto;width:auto;transform:translateY(40px)}.axis{top:25px;bottom:50px}.authority{left:0}.sticky,.precedent{right:0}}
@media(max-width:560px){.chronology{min-height:350px;gap:22px 26px;padding:18px 10px 85px}.chron-card p{display:none}.chron-card footer small{float:none;display:block;width:fit-content;margin-top:4px}.chron-card strong{font-size:12px;line-height:1.3}.card-top{font-size:8px}.chron-card footer{font-size:8px}.c2,.c4{transform:translateY(30px)}}