*{
    box-sizing:border-box}
html{
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%}
body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    overflow-wrap:anywhere}
a{
    color:inherit;
    text-decoration:none}
a:hover{
    text-decoration:underline;
    text-underline-offset:5px}
button,input{
    font:inherit}
button,a,input{
    touch-action:manipulation}
button{
    cursor:pointer}
button:disabled{
    cursor:wait;
    opacity:.65}
:focus-visible{
    outline:3px solid var(--accent);
    outline-offset:5px}
.skip{
    position:absolute;
    left:16px;
    top:-80px;
    background:var(--paper);
    padding:12px;
    z-index:20}
.skip:focus{
    top:16px}
.frame{
    width:min(1240px,calc(100% - 80px));
    margin:auto}
.top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px;
    padding:30px 0;
    border-bottom:1px solid var(--line)}
.brand{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:26px;
    font-weight:800;
    letter-spacing:-1px}
.brand-icon{
    width:32px;
    height:32px;
    display:grid;
    place-items:center;
    background:var(--accent);
    color:var(--on);
    border-radius:8px;
    font-size:25px}
.brand small{
    display:block;
    font-size:10px;
    letter-spacing:1.5px;
    font-weight:500;
    color:var(--muted)}
nav{
    display:flex;
    flex-wrap:wrap;
    gap:8px 26px;
    font-size:13px}
nav a{
    padding:8px 0}
nav [aria-current]{
    color:var(--accent);
    box-shadow:0 2px var(--accent)}
.edition{
    font:11px/1.5 ui-monospace,monospace;
    color:var(--muted);
    letter-spacing:.6px}
.home{
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:32px 64px;
    padding:64px 0 40px;
    align-items:start}
.hero{
    grid-column:1;
    grid-row:1}
.eyebrow{
    font-size:11px;
    font-weight:700;
    letter-spacing:2px;
    color:var(--accent);
    margin:0 0 22px}
.hero h1{
    font-size:clamp(40px,5.1vw,73px);
    font-weight:650;
    letter-spacing:-3px;
    line-height:1.04;
    margin:0 0 24px}
.hero h1 em{
    font-family:Georgia,serif;
    font-weight:400}
.lead{
    max-width:560px;
    color:var(--muted);
    font-size:17px;
    line-height:1.75}
.tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px 18px;
    margin-top:28px;
    font-size:11px;
    color:var(--muted)}
.tags span:before{
    content:'↗';
    color:var(--accent);
    margin-right:8px}
.visual{
    grid-column:1;
    grid-row:2;
    min-width:0;
    position:relative;
    overflow:hidden;
    min-height:180px}
.visual svg{
    display:block;
    width:100%;
    height:210px}
.visual-label{
    display:flex;
    justify-content:space-between;
    border-top:1px solid var(--line);
    padding-top:12px;
    font:10px ui-monospace,monospace;
    color:var(--muted);
    letter-spacing:1px}
.auth{
    grid-column:2;
    grid-row:1 / span 2;
    background:var(--paper);
    border:1px solid var(--line);
    padding:34px;
    border-radius:var(--radius);
    min-width:0}
.auth .eyebrow{
    margin-bottom:12px}
.auth h2{
    font-size:27px;
    letter-spacing:-.8px;
    margin:0 0 8px}
.auth-intro{
    font-size:13px;
    color:var(--muted);
    margin:0 0 24px}
.field-label{
    display:block;
    margin:18px 0 7px;
    font-size:12px;
    font-weight:600}
.input-wrap{
    display:flex;
    gap:4px;
    border:1px solid var(--line);
    border-radius:6px;
    background:var(--bg);
    padding:3px}
.input-wrap:focus-within{
    outline:2px solid var(--accent);
    outline-offset:2px}
input{
    min-width:0;
    width:100%;
    color:var(--ink);
    background:none;
    border:0;
    padding:10px 12px;
    font-size:16px}
input:focus-visible{
    outline:0}
.toggle{
    flex:none;
    color:var(--muted);
    background:none;
    border:0;
    padding:0 10px;
    font-size:11px;
    border-radius:4px}
.submit{
    background:var(--accent);
    color:var(--on);
    width:100%;
    border:0;
    border-radius:6px;
    padding:14px 16px;
    margin-top:24px;
    font-size:14px;
    font-weight:650;
    display:flex;
    justify-content:space-between;
    align-items:center}
.submit:hover{
    filter:brightness(.93)}
.form-note{
    font-size:12px;
    color:var(--muted);
    min-height:40px;
    margin:14px 0 0}
.preview{
    grid-column:1 / -1;
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:22px 28px;
    min-width:0;
    background:var(--paper)}
.section-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:14px}
.section-top h2{
    font-size:14px;
    font-weight:600;
    margin:0}
.micro{
    font:10px ui-monospace,monospace;
    color:var(--muted);
    letter-spacing:1px}
.file-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px}
.file{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 0;
    min-width:0}
.file-icon{
    display:grid;
    place-items:center;
    flex:none;
    width:39px;
    height:46px;
    border:1px solid var(--line);
    border-radius:4px;
    font:10px ui-monospace,monospace;
    color:var(--accent);
    background:var(--bg)}
.file strong{
    display:block;
    font-size:12px;
    font-weight:550}
.file small{
    font-size:11px;
    color:var(--muted)}
.reading{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
    grid-column:1 / -1}
.reading a{
    border-top:1px solid var(--line);
    padding:20px 0;
    display:grid;
    grid-template-columns:40px 1fr 20px;
    gap:12px}
.reading h2{
    font-size:17px;
    margin:0 0 6px;
    line-height:1.4}
.reading p{
    color:var(--muted);
    font-size:12px;
    margin:0}
.reading .num{
    color:var(--accent);
    font:12px ui-monospace,monospace}
.bottom{
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:24px 0;
    border-top:1px solid var(--line);
    font-size:11px;
    color:var(--muted)}
.article-head{
    padding:60px 0 36px;
    max-width:900px}
.article-head h1{
    font-size:clamp(36px,5vw,64px);
    line-height:1.08;
    letter-spacing:-2px;
    margin:0 0 22px}
.article-layout{
    display:grid;
    grid-template-columns:220px minmax(0,780px);
    gap:64px;
    padding-bottom:60px}
.toc{
    align-self:start;
    position:sticky;
    top:25px;
    border-top:1px solid var(--line);
    padding-top:20px}
.toc a{
    display:block;
    font-size:12px;
    margin:14px 0;
    color:var(--muted)}
.prose{
    min-width:0}
.prose section{
    scroll-margin-top:24px;
    border-top:1px solid var(--line);
    padding:26px 0 16px}
.prose h2{
    font-size:24px;
    line-height:1.25;
    letter-spacing:-.5px;
    margin:0 0 15px}
.prose h2 span{
    display:block;
    font:11px ui-monospace,monospace;
    color:var(--accent);
    margin-bottom:12px}
.prose p{
    font-size:16px;
    line-height:1.9;
    margin:0 0 18px}
.source{
    padding:20px;
    background:var(--paper);
    border:1px solid var(--line);
    font-size:12px;
    color:var(--muted)}
.source a{
    text-decoration:underline}
.related{
    display:block;
    padding:26px 0;
    font-weight:600}

@media(max-width:900px){
    .frame{
    width:calc(100% - 40px)}
.top{
    flex-wrap:wrap;
    gap:15px}
.edition{
    display:none}
.home{
    gap:26px;
    padding-top:40px;
    grid-template-columns:1fr .85fr}
.hero h1{
    font-size:48px;
    letter-spacing:-2px}
.auth{
    padding:24px}
.article-layout{
    gap:30px;
    grid-template-columns:160px minmax(0,1fr)}
}

@media(max-width:650px){
    .frame{
    width:calc(100% - 32px)}
.top{
    padding:20px 0}
.brand{
    font-size:24px}
nav{
    gap:8px 20px;
    font-size:12px}
.home{
    display:flex!important;
    flex-direction:column;
    gap:28px;
    padding-top:32px}
.hero{
    order:0;
    width:100%}
.hero h1{
    font-size:clamp(38px,10vw,54px);
    letter-spacing:-1.8px}
.lead{
    font-size:15px}
.visual{
    order:1;
    width:100%;
    min-height:140px}
.visual svg{
    height:180px}
.auth{
    order:2;
    width:100%;
    padding:25px}
.preview{
    order:3;
    width:100%;
    padding:20px}
.file-grid{
    grid-template-columns:1fr;
    gap:0}
.file{
    border-top:1px solid var(--line)}
.reading{
    order:4;
    grid-template-columns:1fr;
    gap:0;
    width:100%}
.bottom{
    flex-direction:column;
    gap:5px}
.article-head{
    padding:38px 0 24px}
.article-head h1{
    letter-spacing:-1px}
.article-layout{
    display:block;
    padding-bottom:20px}
.toc{
    position:static;
    padding-bottom:20px}
.toc a{
    margin:8px 0}
.prose h2{
    font-size:23px}
.prose p{
    font-size:15px}
.section-top{
    align-items:flex-start}
.tags{
    margin-top:22px}
}

@media(prefers-reduced-motion:reduce){
    html{
    scroll-behavior:auto}
*{
    transition:none!important}
}

 :root{
    --bg:#101813;
    --paper:#18241c;
    --ink:#edf3e7;
    --muted:#a6b7a7;
    --accent:#bbf86b;
    --on:#14200e;
    --line:#354938;
    --radius:4px}
body{
    background-image:radial-gradient(#70826938 .6px,transparent .6px);
    background-size:28px 28px}
.home{
    grid-template-columns:1.15fr .85fr;
    gap:26px 64px}
.hero{
    grid-row:1}
.hero h1{
    font-size:clamp(40px,5.6vw,79px);
    font-weight:500}
.visual{
    grid-row:2;
    margin-top:-12px}
.visual svg{
    height:250px}
.auth{
    margin-top:30px;
    border-top:3px solid var(--accent)}
.brand{
    letter-spacing:5px;
    font-weight:500}
.brand-icon{
    background:none;
    color:var(--accent);
    border:1px solid var(--accent);
    border-radius:50%}
.eyebrow,.micro,.edition,nav{
    font-family:ui-monospace,monospace}
.preview{
    background:transparent}
.file-icon{
    border-radius:50%;
    height:39px}
.submit,.input-wrap{
    border-radius:0}
.article-head h1{
    font-weight:500}

.fieldnotes {
     margin: 26px 0;
     }

.fieldnotes .environment {
     padding: 16px 18px;
     background: var(--paper);
     border-left: 3px solid var(--accent);
     font-size: 13px;
     line-height: 1.7;
     }

.command {
     padding: 18px 0;
     border-bottom: 1px dashed var(--line);
     min-width: 0;
     }

.command h3 {
     font-size: 16px;
     line-height: 1.5;
     margin: 0 0 12px;
     }

.command pre {
     margin: 0 0 12px;
     padding: 16px;
     background: var(--paper);
     border: 1px solid var(--line);
     border-radius: 4px;
     overflow-x: auto;
     font: 12px/1.8 ui-monospace, SFMono-Regular, Consolas, monospace;
     color: var(--ink);
     white-space: pre-wrap;
     overflow-wrap: anywhere;
     }

.command p {
     font-size: 13px;
     line-height: 1.8;
     color: var(--muted);
     }

.fieldnotes .tech-source {
     font-size: 12px;
     margin-top: 20px;
     color: var(--muted);
     }

.fieldnotes .tech-source a {
     text-decoration: underline;
     }