/* tools.vonconavoir.com: the same ink-on-parchment palette as the atlas (ink, paper, ivory, hairline rules), laid out as plain reading pages. */
:root{
 --ink:#241b13;--paper:#cdb082;--ivory:#eee1c2;--quiet:#4d3d2a;
 --rule:rgba(36,27,19,.52);--rule-soft:rgba(36,27,19,.24);--plate:rgba(238,225,194,.62);
 --serif:"Bodoni 72","Bodoni MT",Didot,"Times New Roman",serif;
 --sans:"Aptos","Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB",sans-serif;
 --mono:"SFMono-Regular",Menlo,"Cascadia Mono",Consolas,monospace;
 --margin:clamp(20px,4.7vw,88px);--column:880px;--gutter:max(var(--margin),calc((100% - var(--column)) / 2));
 color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;position:relative;isolation:isolate;overflow-x:clip;min-height:100svh;display:flex;flex-direction:column;background:var(--paper);color:var(--ink);font:16px/1.65 var(--sans)}
/* Chart rings in the top-right corner: purely decorative hairlines, fading out. */
body::before{content:"";position:absolute;z-index:-1;top:0;right:0;width:min(760px,100vw);aspect-ratio:1;pointer-events:none;
 background:repeating-radial-gradient(circle at 100% 0,transparent 0 58px,rgba(36,27,19,.11) 58px 59px);
 -webkit-mask-image:radial-gradient(circle at 100% 0,#000 0,transparent 72%);mask-image:radial-gradient(circle at 100% 0,#000 0,transparent 72%)}
a{color:inherit;text-underline-offset:4px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
::selection{background:#3c2e20;color:#ecddbd}
.skip{position:fixed;top:-80px;left:20px;z-index:10;padding:8px 12px;background:var(--ivory);border:1px solid var(--ink)}
.skip:focus{top:8px}
html:not([data-text]) span[lang]:not([lang=en]),html[data-text=en] span[lang]:not([lang=en]),html[data-text=zh-CN] span[lang]:not([lang=zh-CN]),html[data-text=es] span[lang]:not([lang=es]),html[data-text=fr] span[lang]:not([lang=fr]),html[data-text=it] span[lang]:not([lang=it]){display:none}

.masthead{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px var(--gutter);border-bottom:1px solid var(--rule)}
.masthead nav{display:flex;align-items:center;gap:22px;flex-wrap:wrap;font-size:14px}
.masthead nav a{text-decoration:none}
.masthead nav a:hover,.masthead nav a[aria-current]{text-decoration:underline}
.brand{display:flex;align-items:center;gap:12px;font:600 12px/1.5 var(--mono);letter-spacing:.18em;text-transform:uppercase;text-decoration:none}
.brand-mark{position:relative;flex:none;width:21px;height:21px;border:1px solid var(--ink);border-radius:50%}
.brand-mark::before,.brand-mark::after{content:"";position:absolute;background:var(--ink)}
.brand-mark::before{width:1px;height:29px;left:9px;top:-5px}
.brand-mark::after{height:1px;width:29px;left:-5px;top:9px}
.langs{display:flex;flex-wrap:wrap;border:1px solid var(--rule);border-radius:2px;background:var(--ivory)}
.langs button{font:inherit;font-size:13px;line-height:1.2;color:var(--ink);background:transparent;border:0;border-left:1px solid var(--rule-soft);padding:6px 10px;min-width:38px;cursor:pointer}
.langs button:first-child{border-left:0}
.langs button[aria-pressed=true]{background:var(--ink);color:var(--ivory)}
.langs button:not([aria-pressed=true]):hover{background:rgba(36,27,19,.1)}

main{flex:1;width:min(100% - 2*var(--margin),var(--column));margin:0 auto;padding:clamp(32px,6vw,68px) 0 80px}
h1,h2,h3{margin:0;font-weight:400}
h1{font:400 clamp(46px,8.4vw,80px)/1 var(--serif);letter-spacing:-.02em}
h2{font:400 clamp(26px,3.6vw,34px)/1.2 var(--serif);letter-spacing:-.01em}
h3{font:600 17px/1.4 var(--sans)}
p{margin:0 0 1em}
.eyebrow{margin:0 0 14px;font:600 12px/1.5 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--quiet)}
.label{margin:0 0 6px;font:600 12px/1.5 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--quiet)}
.lead{max-width:34em;margin:16px 0 0;font-size:clamp(18px,2.4vw,21px);line-height:1.5}
.hint{font-size:14px;color:var(--quiet)}

.hero{display:grid;grid-template-columns:128px 1fr;gap:clamp(20px,4vw,40px);align-items:start}
.app-icon{display:block;width:128px;height:128px}
.download{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px;margin:28px 0 0}
.action{display:inline-flex;align-items:center;min-height:48px;padding:0 26px;background:var(--ink);color:var(--ivory);border-radius:2px;font:600 15px/1 var(--sans);text-decoration:none}
.action:hover{background:#3c2e20}
.meta{font-size:14px;color:var(--quiet)}

.verify{margin-top:30px;padding:18px 20px;background:var(--plate);border:1px solid var(--rule-soft)}
.hash{display:block;margin:0 0 12px;font:13px/1.6 var(--mono);word-break:break-all;user-select:all}
.verify .hint{margin:0 0 10px}
pre{margin:0;padding:10px 14px;overflow-x:auto;background:var(--ivory);border:1px solid var(--rule-soft)}
pre code{font:13px/1.6 var(--mono)}
code{font:.9em var(--mono)}
p code,li code,dd code{padding:1px 5px;background:rgba(238,225,194,.8);border-radius:2px;overflow-wrap:anywhere}
kbd{padding:1px 7px;font:600 .9em var(--sans);background:var(--ivory);border:1px solid var(--rule);border-bottom-width:2px;border-radius:4px}
strong{font-weight:600}

.notice{margin-top:32px;padding:20px 24px;background:var(--ivory);border:1px solid var(--ink);border-left-width:6px}
.notice h2{font-size:24px}
.notice p{margin:10px 0 0;max-width:42em}

section{margin-top:56px;padding-top:26px;border-top:1px solid var(--rule)}
section>h2{margin-bottom:20px}
section>p,section>ul{max-width:42em}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:0 0 24px;padding:0;list-style:none;counter-reset:step}
.steps li{padding:18px 18px 8px;background:var(--plate);border:1px solid var(--rule-soft);counter-increment:step}
.steps li::before{content:counter(step);display:block;margin-bottom:8px;font:400 36px/1 var(--serif)}
.steps p{font-size:15px}
section>h3{margin:28px 0 10px}
.accepts{margin:0 0 14px;padding-left:1.2em}
.accepts li{margin:6px 0}

.install{margin:0;padding:0;list-style:none;counter-reset:install}
.install li{display:grid;grid-template-columns:36px 1fr;gap:6px 14px;padding:16px 0;border-top:1px solid var(--rule-soft);counter-increment:install}
.install li:last-child{border-bottom:1px solid var(--rule-soft)}
.install li::before{content:counter(install);font:400 30px/1.1 var(--serif)}
.install li>*{grid-column:2;max-width:42em}

dl{max-width:42em;margin:0}
dt{margin-top:18px;font-weight:600}
dt:first-child{margin-top:0}
dd{margin:4px 0 0}

.fine{margin-top:56px;padding-top:20px;border-top:1px solid var(--rule);font-size:14px;color:var(--quiet)}
.fine p{max-width:46em}

.tool{display:grid;grid-template-columns:96px 1fr;gap:20px;align-items:start;margin-top:32px;padding:20px;background:var(--plate);border:1px solid var(--rule-soft)}
.tool img{display:block;width:96px;height:96px}
.tool h2{font-size:28px}
.tool p{margin:8px 0 14px;max-width:34em}
.tool .action{min-height:42px;padding:0 20px;font-size:14px}

.footer{display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;padding:20px var(--gutter);border-top:1px solid var(--rule);font-size:13px;color:var(--quiet)}
.footer nav{display:flex;flex-wrap:wrap;gap:6px 20px}

@media(max-width:700px){
 .steps{grid-template-columns:1fr}
 .hero{grid-template-columns:96px 1fr}
 .app-icon{width:96px;height:96px}
}
@media(max-width:480px){
 .hero{grid-template-columns:1fr}
 .tool{grid-template-columns:1fr}
 .install li{grid-template-columns:30px 1fr}
 .action{width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}