/* ============ LayerX whitepaper · print stylesheet ============ */
@font-face { font-family:"Grand"; src:url(fonts/LTWaveAlt-Medium.otf); font-weight:500; }
@font-face { font-family:"Grand"; src:url(fonts/LTWaveAlt-Bold.otf); font-weight:700; }
@font-face { font-family:"Grand"; src:url(fonts/LTWaveAlt-Light.otf); font-weight:300; }
@font-face { font-family:"Inter"; src:url(fonts/Inter-Regular.ttf); font-weight:400; }
@font-face { font-family:"Inter"; src:url(fonts/Inter-Medium.ttf); font-weight:500; }
@font-face { font-family:"Inter"; src:url(fonts/Inter-SemiBold.ttf); font-weight:600; }
@font-face { font-family:"Mono"; src:url(fonts/LTWaveAlt-Regular.otf); font-weight:400; }
@font-face { font-family:"Mono"; src:url(fonts/LTWaveAlt-Medium.otf); font-weight:500; }
@font-face { font-family:"Mono"; src:url(fonts/LTWaveAlt-Bold.otf); font-weight:700; }

:root {}
@page {
  size: 1233px 952px;
  margin: 96px 100px 84px 100px;
  @top-left { content: element(runhead-l); }
  @top-right { content: element(runhead-r); }
  @bottom-left { content: element(runfoot-l); }
  @bottom-right { content: element(runfoot-r); }
}
@page cover {
  margin: 0;
  @top-left { content: none; } @top-right { content: none; }
  @bottom-left { content: none; } @bottom-right { content: none; }
}

html { -weasy-hyphens: none; }
body { font-family:"Grand"; color:#0B1220; font-size:17.5px; line-height:1.62; font-weight:500; }

/* running header / footer */
.runhead-l { position:running(runhead-l); } .runhead-r { position:running(runhead-r); }
.runfoot-l { position:running(runfoot-l); } .runfoot-r { position:running(runfoot-r); }
.rh, .rf { font-family:"Mono"; font-size:10.5px; letter-spacing:.22em; color:#8A94A6; white-space:nowrap; }
.rh { border-bottom:1px solid #E5E9F0; padding-bottom:14px; width:1033px; }
.rh.right { text-align:right; border-bottom:none; margin-top:0; }
.rf { border-top:1px solid #E5E9F0; padding-top:14px; width:1033px; }
.rf.right { text-align:right; border-top:none; }

/* ---------- cover ---------- */
.cover { page: cover; width:1233px; height:952px; position:relative; background:#fff; }
.cover .topbar { position:absolute; top:0; left:0; right:0; height:70px; border-bottom:1px solid #E5E9F0; }
.cover .topbar .l { position:absolute; left:100px; top:30px; } .cover .topbar .r { position:absolute; right:100px; top:30px; }
.cover .mark { position:absolute; left:100px; top:140px; }
.cover .brandline { position:absolute; left:158px; top:156px; font-family:"Mono"; font-size:12px; letter-spacing:.3em; color:#3A4557; }
.cover .rule { position:absolute; left:290px; right:290px; top:164px; border-top:1px solid #D9DFE8; }
.cover .pill { position:absolute; right:100px; top:150px; font-family:"Mono"; font-weight:700; font-size:12.5px; letter-spacing:.18em; color:#004CED; background:#EAF0FE; padding:8px 16px; border-radius:100px; }
.cover .tag { position:absolute; left:100px; top:288px; font-family:"Mono"; font-size:12px; letter-spacing:.3em; color:#3A4557; }
.cover h1 { position:absolute; left:96px; top:318px; width:1060px; font-weight:700; font-size:66px; line-height:1.08; letter-spacing:-0.5px; color:#0B1220; margin:0; }
.cover .sub { position:absolute; left:100px; top:592px; width:660px; font-weight:500; font-size:23px; line-height:1.5; color:#2B3648; }
.cover .metarow { position:absolute; left:100px; right:100px; top:806px; border-top:1px solid #D9DFE8; padding-top:24px; font-family:"Mono"; font-size:11.5px; letter-spacing:.22em; color:#8A94A6; }
.cover .metarow .v { width:540px; display:inline-block; }
.cover .botbar { position:absolute; bottom:0; left:0; right:0; height:56px; border-top:1px solid #E5E9F0; }
.cover .botbar .l { position:absolute; left:100px; bottom:22px; } .cover .botbar .r { position:absolute; right:100px; bottom:22px; }
.mini { font-family:"Mono"; font-size:10.5px; letter-spacing:.22em; color:#8A94A6; }

/* ---------- meta page ---------- */
.metapage .row { margin-bottom:56px; }
.klabel { font-family:"Mono"; font-size:11.5px; letter-spacing:.28em; color:#8A94A6; margin-bottom:12px; }
.kval { font-size:21px; font-weight:500; color:#0B1220; }
.declare { font-family:"Mono"; font-weight:700; font-size:15px; letter-spacing:.34em; color:#004CED; margin-top:90px; }

/* ---------- headings & body ---------- */
section.sheet { break-before: auto; }
section.fresh { break-before: page; }
h2.sec { margin-top: 64px; }
h2.sec { font-weight:700; font-size:44px; letter-spacing:-.3px; margin:64px 0 34px 0; color:#0B1220; break-after:avoid; }
h2.sec .num { font-family:"Mono"; font-weight:500; font-size:15px; letter-spacing:.2em; color:#004CED; margin-right:22px; vertical-align:18px; }
h3 { font-weight:700; font-size:23px; margin:38px 0 14px 0; color:#0B1220; break-after:avoid; }
p { margin:0 0 20px 0; text-align:left; orphans:3; widows:3; }
p.lead { font-size:18.5px; }
.orphanguard { break-inside: avoid; }

/* small caps chunky principle blocks */
.pblock { margin:0 0 30px 0; }
.pblock .ph { font-family:"Mono"; font-weight:700; font-size:13px; letter-spacing:.24em; color:#004CED; margin-bottom:8px; }

/* figure / caption */
.caption { font-family:"Mono"; font-size:12px; line-height:1.6; color:#6B7688; margin:10px 0 26px 0; }

/* panels (handles / handled-by, pipeline) */
.panel { background:#F4F6FA; border:1px solid #E5E9F0; border-radius:16px; padding:28px 32px; margin:6px 0 14px 0; break-inside:avoid; }
.panel .ph { font-family:"Mono"; font-weight:700; font-size:13px; letter-spacing:.24em; color:#004CED; margin-bottom:12px; }
.panel .pt { font-size:16.5px; line-height:1.7; color:#2B3648; }
.pipe { width:100%; border-spacing:14px 0; margin:6px -14px 8px -14px; }
.pipe td { background:#F4F6FA; border:1px solid #E5E9F0; border-radius:14px; padding:20px 18px; vertical-align:top; width:20%; break-inside:avoid; }
.pipe .n { font-family:"Mono"; font-weight:700; font-size:12px; letter-spacing:.2em; color:#004CED; margin-bottom:8px; }
.pipe .t { font-size:14.5px; line-height:1.55; color:#2B3648; }

/* code figures */
.codefig { border:1px solid #E5E9F0; border-radius:14px; overflow:hidden; margin:8px 0 10px 0; break-inside:avoid; }
.codefig .bar { background:#F4F6FA; border-bottom:1px solid #E5E9F0; padding:10px 18px; font-family:"Mono"; font-size:12px; color:#6B7688; }
.codefig .bar .lang { float:right; letter-spacing:.15em; }
.codefig pre { margin:0; padding:20px 24px; font-family:"Mono"; font-size:14px; line-height:1.65; color:#1C2534; white-space:pre; overflow-x:auto; }

/* tables */
table.spec { width:100%; border-collapse:collapse; margin:6px 0 10px 0; }
table.spec th { font-family:"Mono"; font-size:11.5px; letter-spacing:.18em; color:#8A94A6; text-align:left; font-weight:500; padding:10px 14px 10px 0; border-bottom:1px solid #D9DFE8; }
table.spec td { font-size:14.5px; line-height:1.55; color:#1C2534; padding:13px 16px 13px 0; border-bottom:1px solid #ECEFF4; vertical-align:top; }
table.spec td.mono { font-family:"Mono"; font-size:13px; color:#004CED; white-space:nowrap; }
table.spec tr { break-inside:avoid; }

/* math blocks */
.math { background:#F4F6FA; border:1px solid #E5E9F0; border-radius:14px; padding:22px 28px; font-family:"Mono"; font-size:14.5px; line-height:1.8; color:#1C2534; margin:8px 0 22px 0; break-inside:avoid; overflow-x:auto; }

/* roadmap */
.phase { display:table; width:100%; margin-bottom:26px; break-inside:avoid; }
.phase .ph { display:table-cell; width:210px; font-family:"Mono"; font-weight:700; font-size:12.5px; letter-spacing:.2em; color:#004CED; padding-top:4px; }
.phase .pb { display:table-cell; font-size:16.5px; line-height:1.65; color:#1C2534; }

/* appendix list */
.const { font-family:"Mono"; font-size:12.5px; line-height:1.62; color:#1C2534; }
.const b { color:#004CED; font-weight:700; }

.blue { color:#004CED; }
strong { font-weight:700; }

h2.sec { break-inside: avoid; }
section.fresh h2.sec, section.fresh .klabel { margin-top:0; }

/* ============ screen rendering (browsers) ============ */
/* The rules above target paged/PDF output (@page, position:running, break-*).
   Browsers ignore those, so this block lays the document out as sheets on screen.
   Fonts and the cover logo are untouched. */
@media screen {
  html, body { background:#E8ECF2; }
  body { margin:0; padding:56px 0 72px 0; min-width:auto; max-width:100%; box-sizing:border-box; -webkit-font-smoothing:antialiased; }

  /* running header/footer sources are print-only — hide the stray divs */
  .runhead-l, .runhead-r, .runfoot-l, .runfoot-r { display:none; }

  /* each section renders as a page-like sheet */
  .cover, section.sheet {
    width:100%; max-width:1233px; margin:0 auto 44px auto; background:#fff;
    box-shadow:0 1px 3px rgba(11,18,32,.10), 0 14px 44px rgba(11,18,32,.08);
    box-sizing:border-box;
  }
  section.sheet { padding:96px 100px 84px 100px; }
  section.sheet:last-of-type { margin-bottom:0; min-height:952px; }

  /* sheets provide their own top padding — drop the extra print-break offset */
  section.sheet > h2.sec:first-child { margin-top:0; }

  /* tables responsive */
  table.spec { display:block; overflow-x:auto; }
  
  /* pipeline responsive */
  .pipe { display:flex; flex-wrap:wrap; }
  .pipe td { flex:1; min-width:200px; margin:7px; }
}

/* ============ tablet breakpoint (768px - 1232px) ============ */
@media screen and (max-width: 1232px) {
  body { padding:32px 0 48px 0; }
  
  .cover, section.sheet {
    margin:0 auto 32px auto;
    border-radius:12px;
  }
  section.sheet { padding:48px 32px; }
  
  h2.sec { font-size:32px; margin:48px 0 24px 0; }
  h3 { font-size:20px; margin:28px 0 12px 0; }
  p { font-size:15px; margin:0 0 16px 0; }
  p.lead { font-size:16px; }
  
  .cover {
    width:100%;
    height:auto;
    position:relative;
    padding:32px;
  }
  .cover .topbar { position:relative; height:auto; border:none; margin-bottom:20px; }
  .cover .topbar .l, .cover .topbar .r { position:static; display:block; margin-bottom:12px; }
  .cover .mark { position:relative; display:inline-block; left:0; top:0; margin-bottom:12px; }
  .cover .brandline { position:relative; left:0; top:0; margin:8px 0; }
  .cover .rule { position:relative; left:0; right:0; top:0; margin:16px 0; }
  .cover .pill { position:relative; right:0; top:0; display:inline-block; margin:12px 0; }
  .cover .tag { position:relative; left:0; top:0; margin:12px 0; display:block; }
  .cover h1 { position:relative; left:0; top:0; width:100%; font-size:40px; margin:20px 0; }
  .cover .sub { position:relative; left:0; top:0; width:100%; font-size:18px; margin:16px 0; }
  .cover .metarow { position:relative; left:0; right:0; top:0; border:none; padding:0; display:block; margin:16px 0; }
  .cover .metarow .v { width:100%; display:block; margin-bottom:12px; }
  .cover .botbar { position:relative; bottom:auto; height:auto; border:none; }
  .cover .botbar .l, .cover .botbar .r { position:static; display:block; margin-bottom:8px; }
  
  .panel { padding:20px 24px; margin:6px 0 12px 0; }
  .panel .ph { font-size:12px; }
  .panel .pt { font-size:15px; }
  
  .codefig pre { font-size:12px; padding:16px 20px; }
  
  .pipe { border-spacing:8px 0; margin:6px -8px 8px -8px; }
  .pipe td { padding:16px 12px; }
  .pipe .n { font-size:11px; margin-bottom:6px; }
  .pipe .t { font-size:13px; }
  
  table.spec { font-size:13px; }
  table.spec th { font-size:10.5px; padding:8px 10px 8px 0; }
  table.spec td { font-size:13px; padding:10px 12px 10px 0; }
  
  .math { padding:16px 20px; font-size:13px; }
  
  .phase { display:block; }
  .phase .ph { display:block; width:100%; margin-bottom:8px; }
  .phase .pb { display:block; }
  
  .const { font-size:11.5px; }
}

/* ============ mobile breakpoint (max 767px) ============ */
@media screen and (max-width: 767px) {
  body { padding:20px 0 40px 0; }
  
  .cover, section.sheet {
    margin:0 12px 24px 12px;
    border-radius:8px;
  }
  section.sheet { padding:24px 16px; }
  
  h2.sec { font-size:24px; margin:32px 0 16px 0; }
  h2.sec .num { font-size:12px; margin-right:12px; }
  h3 { font-size:18px; margin:20px 0 10px 0; }
  p { font-size:14px; margin:0 0 14px 0; line-height:1.5; }
  p.lead { font-size:15px; }
  
  .cover {
    padding:20px;
    margin:0 12px 20px 12px;
  }
  .cover .topbar { margin-bottom:16px; }
  .cover .topbar .l, .cover .topbar .r { display:block; margin-bottom:8px; }
  .cover .topbar .mini { font-size:9px; }
  .cover .mark { width:28px !important; height:28px !important; }
  .cover .brandline { font-size:11px; }
  .cover h1 { font-size:28px; line-height:1.2; margin:16px 0; }
  .cover .sub { font-size:15px; margin:12px 0; }
  .cover .botbar { margin-top:16px; }
  .cover .botbar .l, .cover .botbar .r { display:block; margin-bottom:6px; }
  
  .panel { padding:16px 14px; margin:6px 0 10px 0; }
  .panel .ph { font-size:11px; margin-bottom:6px; }
  .panel .pt { font-size:14px; line-height:1.6; }
  
  .pblock { margin:0 0 20px 0; }
  .pblock .ph { font-size:12px; margin-bottom:6px; }
  
  .caption { font-size:11px; margin:8px 0 16px 0; }
  
  .codefig { border-radius:8px; }
  .codefig .bar { padding:8px 12px; font-size:11px; }
  .codefig pre { font-size:11px; padding:12px 14px; line-height:1.4; }
  
  .pipe { display:block; border-spacing:0; margin:4px 0; }
  .pipe td { display:block; width:100%; margin:0; padding:12px 0; border-bottom:1px solid #E5E9F0; border-radius:0; }
  .pipe td:last-child { border-bottom:none; }
  .pipe .n { font-size:10px; margin-bottom:4px; }
  .pipe .t { font-size:13px; }
  
  table.spec { font-size:12px; border-spacing:0; }
  table.spec th { font-size:10px; padding:6px 8px 6px 0; }
  table.spec td { font-size:12px; padding:8px 10px 8px 0; }
  table.spec td.mono { font-size:11px; }
  
  .math { padding:12px 16px; font-size:12px; line-height:1.5; }
  
  .phase { display:block; }
  .phase .ph { display:block; width:100%; margin-bottom:6px; font-size:11px; }
  .phase .pb { display:block; font-size:14px; line-height:1.5; }
  
  .const { font-size:11px; line-height:1.5; }
  
  .klabel { font-size:10px; }
  .kval { font-size:18px; }
  
  .declare { font-size:13px; }
}