/* Six project pages: shared skeleton. Colours, type and signature components live in each page layer
   (vl/fl/cx/lm/rl/fi.css), which set --bg/--bg2/--fg/--fg2/--fg3/--line so the site top bar follows. */
.p6{--px:56px;--w:1200px;background:var(--bg);color:var(--fg)}
.p6 main{display:block}
.p6 [hidden]{display:none!important}
.p6 p{margin:0;max-width:none}
.p6 h1,.p6 h2,.p6 h3,.p6 figure,.p6 ul,.p6 ol,.p6 dl,.p6 dd{margin:0}
.p6 ul,.p6 ol{padding:0;list-style:none}
.p6 h1,.p6 h2,.p6 h3{text-wrap:balance}
.p6 .w{max-width:calc(var(--w) + 2 * var(--px));margin:0 auto;padding:0 var(--px)}
.p6 .sec{padding:120px 0;border-top:1px solid var(--line)}
.p6 .sec:first-child{border-top:0}
.p6 .k{display:block;font:600 13px/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg3);margin-bottom:18px}
.p6 .sh{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:28px 72px;align-items:end;margin-bottom:60px}
.p6 .sh .lede{font-size:18px;line-height:1.75;color:var(--fg2)}
.p6 .lede{color:var(--fg2)}
.p6 .p{font-size:17px;line-height:1.8;color:var(--fg2);max-width:62ch}
.p6 .p.zh{max-width:34em}
.p6 .p b,.p6 .lede b{color:var(--fg);font-weight:600}
.p6 .mine{font:400 17px/1.85 "Source Serif 4","Noto Serif SC",serif;color:var(--fg);margin:0;font-style:normal}
.p6 .mine .zh{font-size:16.5px;line-height:2}
.p6 .note{font-size:14px;line-height:1.6;color:var(--fg3)}
.p6 code{font-family:var(--f-mono);font-size:.92em}
.p6 a:focus-visible,.p6 button:focus-visible,.p6 input:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:4px}
.p6 .ar{display:inline-block;transition:transform .2s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){.p6 a:hover .ar{transform:translateX(3px)}}
.p6 .btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.p6 .pb,.p6 .pb2{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;font:600 15px/1 var(--f-ui);text-decoration:none;cursor:pointer;transition:background-color .18s,border-color .18s,color .18s,transform .15s}
.p6 .pb .ic,.p6 .pb2 .ic{width:18px;height:18px}
.p6 .pb:active,.p6 .pb2:active{transform:scale(.97)}
/* copyable command */
.p6 .cp{display:inline-flex;align-items:stretch;min-height:48px;border:1px solid var(--line);background:var(--bg2);max-width:100%}
.p6 .cp code{display:flex;align-items:center;padding:0 16px;white-space:nowrap;overflow-x:auto;font-size:14.5px;color:var(--fg);user-select:all}
.p6 .cp button{border:0;border-left:1px solid var(--line);background:transparent;color:var(--fg2);font:600 13px/1 var(--f-ui);padding:0 16px;cursor:pointer;min-width:64px}
.p6 .cp button .c-b{display:none}
.p6 .cp button.ok .c-a{display:none}.p6 .cp button.ok .c-b{display:inline}
html[data-lang="en"] .p6 .cp button.ok .c-b.zh,html[data-lang="zh"] .p6 .cp button.ok .c-b.en{display:none}
@media (hover:hover){.p6 .cp button:hover{color:var(--fg);background:color-mix(in srgb,var(--fg) 6%,transparent)}}
/* figures */
.p6 figcaption{font-size:14px;line-height:1.55;color:var(--fg3);margin-top:14px}
.p6 .scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* limits */
.p6 .lim{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:24px 72px}
.p6 .lim ul{display:flex;flex-direction:column;gap:16px}
.p6 .lim li{position:relative;padding-left:22px;color:var(--fg2);font-size:16.5px;line-height:1.75}
.p6 .lim li::before{content:"";position:absolute;left:0;top:.8em;width:9px;height:1.5px;background:var(--fg3)}
/* end: links + next project */
.p6 .end{padding:96px 0 120px}
.p6 .end-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 72px;align-items:start}
.p6 .end-links{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.p6 .end-links a{display:flex;justify-content:space-between;align-items:center;min-height:56px;border-bottom:1px solid var(--line);text-decoration:none;font-size:17px;color:var(--fg)}
.p6 .next{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--fg);padding:28px 30px;border:1px solid var(--line);background:var(--bg2);position:relative}
.p6 .next .k{margin-bottom:6px}
.p6 .next b{font-size:36px;line-height:1.1;font-weight:700}
.p6 .next .next-d{color:var(--fg2);font-size:16px}
.p6 .next>.ar{position:absolute;right:28px;top:28px;font-size:22px}
/* reveal: only when p6.js runs and motion is allowed; content is visible otherwise */
html.p6-js.hx-in .p6 .rv{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
html.p6-js.hx-in .p6 .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.p6-js .p6 .rv{opacity:1!important;transform:none!important;transition:none!important}}

@media (max-width:899px){
  .p6{--px:20px}
  .p6 main{padding-bottom:96px}
  .p6 .sec{padding:72px 0}
  .p6 .sh{grid-template-columns:minmax(0,1fr);margin-bottom:36px;gap:18px}
  .p6 .sh .lede{font-size:16.5px}
  .p6 .p{font-size:16px}
  .p6 .k{font-size:12px;margin-bottom:14px}
  .p6 .lim,.p6 .end-in{grid-template-columns:minmax(0,1fr);gap:28px}
  .p6 .lim li{font-size:15.5px}
  .p6 .end{padding:64px 0 72px}
  .p6 .next b{font-size:30px}
  .p6 .pb,.p6 .pb2{min-height:48px;padding:0 18px}
  .p6 .cp{width:100%}
  .p6 .cp code{flex:1;min-width:0}
}