:root{
    --bg:#fff;
    --fg:#000;
    --line:rgba(0,0,0,.9);
    --thin:rgba(0,0,0,.18);
    --hair:rgba(0,0,0,.10);
    --soft:rgba(0,0,0,.06);
    --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
    --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
    background: var(--bg);
    color: var(--fg);
    font-family: var(--sans);
    overflow-x:hidden;
}

/* 背景画布 */
#bg{
    position:fixed;
    inset:0;
    width:100vw;
    height:100vh;
    z-index:0;
    pointer-events:none;
}

/* =========================
   NAV (top bar)
   ========================= */
.top-nav{
    position:fixed;
    top:18px;
    left:18px;
    right:18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    z-index:20;
}

.nav-right{
    display:flex;
    gap:12px;
    align-items:center;
}

/* =========================
   BIG BUTTON LANGUAGE
   统一按钮风格（nav-btn / btn）
   ========================= */
.nav-btn, .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    /* 主语言尺寸（你要的大框） */
    width:240px;
    height:64px;

    /* 兼容你的变量：优先 line，否则 ink */
    border:2px solid var(--line, var(--ink, #000));
    background: rgba(255,255,255,.65);
    color: var(--fg, var(--ink, #000));

    text-decoration:none;
    cursor:pointer;
    user-select:none;

    font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace);
    font-size:13px;
    letter-spacing:.06em;
    text-transform:uppercase;

    transition: transform .15s ease, background .2s ease, opacity .2s ease;
}

.nav-btn:hover, .btn:hover{
    transform: translateY(-1px);
    background:#fff;
}
.nav-btn:active, .btn:active{
    transform: translateY(0);
    opacity:.85;
}

/* =========================
   CORNER INDEX (右上角 mini index)
   改成：三列一行
   ========================= */
.corner-index{
    position:fixed;
    right:20px;
    top:20px;
    z-index:30;

    /* 关键：网格三列 */
    display:grid;
    grid-template-columns: repeat(3, 240px);
    gap:10px;

    /* 让整体“贴右”但按钮三列对齐 */
    justify-content:end;
    align-items:center;
}

/* corner-index 内部的按钮继承 nav-btn 即可，不再额外写 width/height */

/* =========================
   Responsive：屏幕窄时自动变 2 列 / 1 列
   ========================= */
@media (max-width: 980px){
    .corner-index{
        grid-template-columns: repeat(2, 240px);
    }
}

@media (max-width: 640px){
    .corner-index{
        left:12px;
        right:12px;
        top:auto;
        bottom:12px;

        grid-template-columns: 1fr; /* 一列 */
        justify-content:center;
    }

    .corner-index .nav-btn,
    .corner-index .btn{
        width: 100%;
        max-width: 520px;
    }
}

/* =========================
   SHELL
   ========================= */
.shell{
    position:relative;
    z-index:5;
    width:min(1120px, calc(100vw - 40px));
    margin: 0 auto;
    padding: 110px 0 44px;
}


/* 页面容器 */
.shell{
    position:relative;
    z-index:10;
    max-width: 1120px;
    margin: 0 auto;
    padding: 96px 18px 64px;
}

/* hero */
.hero{
    border:1px solid var(--line);
    background: rgba(255,255,255,.72);
    padding: 26px 22px 22px;
    position:relative;
    overflow:hidden;

    /* 网格：保持你主站语言 */
    background-image:
            repeating-linear-gradient(to right, var(--hair) 0, var(--hair) 0.5px, transparent 0.5px, transparent 22px),
            repeating-linear-gradient(to bottom, var(--hair) 0, var(--hair) 0.5px, transparent 0.5px, transparent 22px);
}
.kicker{
    font-family: var(--mono);
    letter-spacing:.2em;
    font-size:12px;
    text-transform:uppercase;
    opacity:.9;
    margin-bottom:10px;
}
.mono{ font-family: var(--mono); }

.title{
    position:relative;
    font-size: clamp(34px, 5.2vw, 68px);
    letter-spacing:.06em;
    text-transform:uppercase;
    line-height:1.06;
}
.title .ghost{
    position:absolute;
    left:0;
    top:0;
    transform: translate(2px, 2px);
    opacity:.08;
    pointer-events:none;
}
.lead{
    margin-top:14px;
    max-width: 78ch;
    font-size: 16px;
    line-height: 1.65;
    opacity:.95;
}
.meta{
    margin-top:16px;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}
.pill{
    padding:8px 10px;
    border:1px solid var(--line);
    background: rgba(255,255,255,.7);
    font-size:12px;
    letter-spacing:.12em;
    text-transform:uppercase;
}
.scanline{
    position:absolute;
    left:-20%;
    right:-20%;
    height:2px;
    top:0;
    background: rgba(0,0,0,.10);
    animation: scan 6s linear infinite;
}
@keyframes scan{
    0%{ transform: translateY(-20px); opacity:.0; }
    15%{ opacity:.6; }
    50%{ opacity:.35; }
    85%{ opacity:.6; }
    100%{ transform: translateY(360px); opacity:0; }
}

/* panels */
.panel{
    border:1px solid var(--line);
    background: rgba(255,255,255,.78);
    padding: 18px 18px 16px;
    position:relative;
    overflow:hidden;
}
.panel::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background-image:
            repeating-linear-gradient(to right, transparent 0, transparent 20px, rgba(0,0,0,.035) 20px, rgba(0,0,0,.035) 21px),
            repeating-linear-gradient(to bottom, transparent 0, transparent 20px, rgba(0,0,0,.03) 20px, rgba(0,0,0,.03) 21px);
    opacity:.35;
}
.panel-head{
    position:relative;
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:12px;
    margin-bottom:12px;
}
.panel-title{
    font-family: var(--mono);
    letter-spacing:.14em;
    text-transform:uppercase;
    font-size:14px;
}
.panel-tag{
    font-size:12px;
    letter-spacing:.12em;
    text-transform:uppercase;
    opacity:.85;
}
.copy{
    position:relative;
    line-height:1.72;
    font-size:15px;
}
.copy p{ margin-bottom:10px; }
.quiet{ opacity:.78; }
.warn{
    margin-top:10px;
    padding:10px 12px;
    border:1px solid var(--line);
    background: rgba(0,0,0,.03);
}

/* grid layout */
.grid{
    display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap:14px;
    margin-top:14px;
}
@media (max-width: 900px){
    .grid{ grid-template-columns: 1fr; }
    .nav-btn,.btn{ width: 180px; height:56px; }
    .corner-index{ display:none; } /* 手机端隐藏右上目录避免拥挤 */
}

/* stack layers */
.stack{
    margin-top:14px;
    display:grid;
    grid-template-columns: 1fr;
    gap:14px;
}
.layer{
    scroll-margin-top: 110px;
}
.bullets{
    margin:10px 0 12px 18px;
}
.bullets li{ margin:6px 0; }

/* jump buttons */
.jump{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:10px;
}
.jump-btn{
    font-family: var(--mono);
    border:1px solid var(--line);
    background: rgba(255,255,255,.7);
    padding:10px 12px;
    cursor:pointer;
    letter-spacing:.08em;
    text-transform:uppercase;
    font-size:12px;
    transition: transform .15s ease, background .15s ease;
}
.jump-btn:hover{ transform: translateY(-1px); background:#fff; }

/* two col list */
.two-col{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:14px;
    margin:10px 0 12px;
}
@media (max-width: 900px){ .two-col{ grid-template-columns: 1fr; } }
.sub{ letter-spacing:.12em; text-transform:uppercase; font-size:12px; margin-bottom:8px; opacity:.9; }

/* map block */
.map-wrap{
    display:grid;
    grid-template-columns: 320px 1fr;
    gap:14px;
    align-items:stretch;
}
@media (max-width: 900px){
    .map-wrap{ grid-template-columns: 1fr; }
}

.map-left{
    position:relative;
    z-index:1;
}
.map-kicker{
    letter-spacing:.16em;
    text-transform:uppercase;
    font-size:12px;
    opacity:.9;
    margin-bottom:8px;
}
.map-flow{
    border:1px solid var(--line);
    padding:10px 12px;
    background: rgba(255,255,255,.75);
    letter-spacing:.12em;
    text-transform:uppercase;
    font-size:12px;
    margin-bottom:10px;
}
.map-note{
    font-size:14px;
    line-height:1.7;
    opacity:.92;
    margin-bottom:14px;
}
.map-legend{
    border:1px solid var(--line);
    padding:10px 12px;
    background: rgba(255,255,255,.75);
    margin-bottom:12px;
}
.legend-row{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.12em;
}
.dot{
    width:10px;height:10px;border:1px solid var(--line);
    display:inline-block;
}
.d1{ background: rgba(0,0,0,.08); }
.d2{ background: rgba(0,0,0,.16); }
.d3{ background: rgba(0,0,0,.24); }

.map-actions{
    display:flex;
    gap:10px;
}
.btn{
    width:auto;
    height:auto;
    padding:12px 14px;
    font-size:12px;
}

/* arch map canvas */
.map-right{
    position:relative;
    min-height: 420px;
}
#archMap{
    width:100%;
    height: 420px;
    display:block;
    border:1px solid var(--line);
    background: rgba(255,255,255,.70);
}
.map-hint{
    position:absolute;
    right:12px;
    bottom:10px;
    font-size:11px;
    letter-spacing:.14em;
    text-transform:uppercase;
    opacity:.65;
    pointer-events:none;
}

.flowline{
    padding:10px 12px;
    border:1px solid var(--line);
    background: rgba(255,255,255,.75);
    display:inline-block;
}

/* footer */
.foot{
    margin-top:16px;
    padding: 18px 2px 0;
    text-align:center;
}
.foot-line{
    height:1px;
    background: var(--line);
    opacity:.85;
    margin-bottom:12px;
}
.foot-row{
    display:flex;
    gap:10px;
    align-items:center;
    justify-content:space-between;
    padding: 0 2px 10px;
    font-size:12px;
    letter-spacing:.12em;
    text-transform:uppercase;
}
@media (max-width: 900px){
    .foot-row{ flex-direction:column; align-items:flex-start; }
}
.logo{
    margin: 10px auto 6px;
    height: 46px;
    width:auto;
    display:block;
}
.foot-meta{
    font-size:12px;
    letter-spacing:.14em;
    text-transform:uppercase;
    opacity:.75;
}

/* Reveal */
.reveal{
    opacity:0;
    transform: translateY(10px);
    transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-in{
    opacity:1;
    transform:none;
}

/* layer highlight (JS 加 class) */
.layer.is-focus{
    box-shadow: 0 0 0 2px rgba(0,0,0,.18) inset;
}
/* ====== PROTOCOL SIDEBAR (drop-in) ====== */
.lr-side{
    position: fixed;
    right: 20px;
    top: 120px;
    z-index: 40;

    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-end;

    /* 让整体有一点“浮起”的干净感（不影响主风格） */
    filter: drop-shadow(0 6px 14px rgba(0,0,0,.06));
}

.lr-side-btn{
    width: 210px;
    height: 46px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 2px solid rgba(0,0,0,.9);
    background: rgba(255,255,255,.65);
    color: #000;

    text-decoration: none;
    user-select: none;

    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;

    transition: transform .15s ease, background .18s ease, box-shadow .18s ease;
}

.lr-side-btn:hover{
    transform: translateX(-2px);
    background: rgba(255,255,255,.92);
}

.lr-side-btn.is-active{
    background: #fff;
    box-shadow: 0 0 0 2px rgba(0,0,0,.14) inset;
}

/* toggle button */
.lr-side-toggle{
    margin-top: 6px;
    width: 52px;
    height: 42px;

    border: 2px solid rgba(0,0,0,.9);
    background: rgba(255,255,255,.65);
    color: #000;
    cursor: pointer;

    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
    font-size: 14px;

    transition: transform .15s ease, background .18s ease;
}

.lr-side-toggle:hover{
    transform: translateX(-2px);
    background: rgba(255,255,255,.92);
}

/* collapsed */
.lr-side.is-collapsed .lr-side-btn{
    width: 52px;
    justify-content: center;
    letter-spacing: 0;
    font-size: 10px;
    padding: 0;
}
.lr-side.is-collapsed .lr-side-btn::after{
    /* 用短标记代替全文 */
    content: "•";
    font-size: 18px;
    line-height: 1;
}
.lr-side.is-collapsed .lr-side-btn{
    color: transparent;
}
.lr-side.is-collapsed .lr-side-btn.is-active{
    color: transparent;
}
.lr-side.is-collapsed .lr-side-btn.is-active::after{
    content: "⟡";
    font-size: 16px;
}

/* Mobile: 自动变成底部抽屉式（不占右侧空间） */
@media (max-width: 860px){
    .lr-side{
        right: 12px;
        left: 12px;
        top: auto;
        bottom: 12px;

        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;

        align-items: center;
    }
    .lr-side-btn{
        width: auto;
        padding: 0 12px;
        height: 42px;
        letter-spacing: .14em;
    }
    .lr-side-toggle{
        width: 52px;
        height: 42px;
    }
    .lr-side.is-collapsed{
        /* 手机上折叠成只剩 toggle */
        left: auto;
        right: 12px;
    }
    .lr-side.is-collapsed .lr-side-btn{
        display: none;
    }
}
/* ====== /PROTOCOL SIDEBAR ====== */