:root { color-scheme:light; --paper:#f6f9ff; --white:#fff; --ink:#315475; --muted:#597991; --blue:#5578dc; --turquoise:#159caf; --mint:#30b7a6; --violet:#8876d6; --line:#d9e5f1; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
a:focus-visible, summary:focus-visible, input:focus-visible, button:focus-visible { outline:3px solid var(--turquoise); outline-offset:4px; }
.shell { width:min(100%,1490px); margin-inline:auto; padding-inline:clamp(21px,4.2vw,65px); }
h1 { font-size:40px; line-height:1.16; letter-spacing:-.038em; font-weight:800; margin:0 0 23px; }
h2 { font-size:28px; line-height:1.25; letter-spacing:-.027em; font-weight:780; margin:0 0 23px; }
h3 { font-size:19px; line-height:1.35; margin:0 0 14px; }
p { font-size:16px; line-height:1.76; margin:0 0 19px; }
/* Brand and navigation */
.site-header { position:relative; z-index:10; background:#fcfefff2; border-bottom:1px solid #d9e8f3; }
.header-inner { max-width:1490px; margin:auto; padding:17px clamp(21px,4.2vw,65px); display:flex; align-items:center; justify-content:space-between; gap:22px; }
.identity { display:inline-flex; align-items:center; gap:12px; flex-shrink:0; text-decoration:none; }
.identity-monogram { width:43px; height:43px; position:relative; border:1px solid #aecddd; border-radius:13px; background:linear-gradient(155deg,#edf6ff,#d8f1f1); text-align:center; line-height:41px; font-size:28px; font-weight:900; color:var(--blue); }
.identity-orb { position:absolute; width:8px; height:8px; right:-3px; top:4px; background:var(--turquoise); border:2px solid #f0fbfc; border-radius:50%; }
.identity-name { color:#3d65a2; font-size:21px; line-height:1; font-weight:900; letter-spacing:-.065em; }
.identity-name small { display:block; font-size:8px; letter-spacing:.19em; line-height:1.45; font-weight:750; color:#7391aa; margin-top:5px; }
.main-nav { display:flex; align-items:center; justify-content:flex-end; gap:clamp(10px,1.6vw,26px); }
.main-nav a,.more-menu summary { color:#617c94; text-decoration:none; white-space:nowrap; cursor:pointer; font-size:13px; font-weight:690; padding:11px 0; }
.main-nav a:hover,.main-nav a[aria-current="page"],.more-menu summary:hover { color:var(--blue); }
.main-nav a[aria-current="page"] { box-shadow:inset 0 -2px var(--turquoise); }
.more-menu { position:relative; }
.more-menu summary { list-style:none; }
.more-menu summary::-webkit-details-marker { display:none; }
.more-menu summary::after { content:" +"; color:#3c9bb2; }
.more-list { position:absolute; z-index:20; top:calc(100% + 14px); right:0; width:345px; padding:17px 20px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px 18px; border-radius:15px; border:1px solid #d5e5ef; background:white; box-shadow:0 22px 46px #6e9fcb2b; }
.more-list a { padding:11px 0; }
.mobile-menu { display:none; }
/* High-detail graphic environment and hero */
.scene-wrap { position:relative; overflow:clip; background:radial-gradient(ellipse at 81% 19%,#e7f9f9 0,transparent 44%),radial-gradient(ellipse at 13% 55%,#ecedff 0,transparent 42%),linear-gradient(145deg,#fafcff,#edf6fe 54%,#f7faff); border-bottom:1px solid #d9e8f3; }
.scene-wrap::before { content:""; position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(#8ea9d13a 1px,transparent 1px); background-size:27px 27px; mask-image:linear-gradient(90deg,transparent,#000); opacity:.35; }
.hero { position:relative; display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,1fr); align-items:center; gap:clamp(22px,2.9vw,55px); padding:clamp(52px,5vw,83px) 0 49px; }
.hero-copy { position:relative; min-width:0; z-index:1; }
.eyebrow,.section-kicker { display:flex; align-items:center; gap:14px; margin:0 0 19px; color:var(--turquoise); font-size:11px; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
.eyebrow-number { border:1px solid #c0dbe8; background:#e2f1f8; padding:7px 10px; border-radius:7px; }
.eyebrow-chapter { color:var(--blue); }
.section-kicker::before { content:""; width:26px; height:2px; background:var(--mint); flex-shrink:0; }
.hero-motto { color:#2f7e9b; font-size:clamp(19px,2.2vw,27px); line-height:1.14; font-weight:800; letter-spacing:-.035em; margin:0 0 31px; }
.motto-point { color:var(--mint); }
.hero h1 { max-width:670px; }
.hero .lead { color:#42617c; font-weight:620; }
.hero p { max-width:645px; }
.hero-legend { display:flex; gap:7px; flex-wrap:wrap; margin-top:33px; }
.hero-legend span { display:inline-flex; gap:6px; align-items:center; border:1px solid #c8dfe9; border-radius:6px; background:#ffffff90; padding:8px 8px 8px 6px; color:#66859b; font-size:9px; font-weight:750; letter-spacing:.045em; }
.hero-legend b { display:grid; place-items:center; width:22px; height:22px; border-radius:4px; background:#e0f2f3; color:var(--turquoise); font-size:13px; }
.hero-legend span:nth-child(2) b { color:var(--blue); background:#e5eafe; }
.hero-legend span:nth-child(3) b { color:var(--violet); background:#ebeafa; }
.hero-legend span:nth-child(4) b { color:#238b81; background:#ddf4ee; }
.habitat-art { position:relative; isolation:isolate; justify-self:center; width:100%; max-width:630px; min-width:0; aspect-ratio:1/.95; overflow:hidden; border:1px solid #bcd6eb; border-radius:32px; background:radial-gradient(circle at 50% 46%,#fff9,#d8edf5 38%,#eaf1fe 65%,#d9f1f4); box-shadow:inset 0 0 70px #ffffffab,0 25px 65px #668fcc25; }
.habitat-art::before { content:""; position:absolute; z-index:-1; inset:10%; border-radius:50%; background:radial-gradient(circle,#a7cfeb79,#c8e7ef52 48%,transparent 71%); filter:blur(9px); }
.habitat-art::after { content:""; position:absolute; inset:11px; border:1px solid #c5dcebab; border-radius:25px; pointer-events:none; }
.habitat-grid { position:absolute; inset:0; background:repeating-linear-gradient(0deg,transparent 0 35px,#8caed227 36px,transparent 37px),repeating-linear-gradient(90deg,transparent 0 35px,#8caed227 36px,transparent 37px); mask-image:radial-gradient(ellipse at 50% 50%,#000 4%,transparent 75%); }
.habitat-coordinate { position:absolute; z-index:3; font-size:8px; line-height:1.6; letter-spacing:.12em; font-weight:750; color:#7799ae; }
.habitat-coordinate--tl { left:6%; top:5%; } .habitat-coordinate--tr { right:6%; top:5%; text-align:right; }
.habitat-coordinate--bl { left:6%; bottom:6%; } .habitat-coordinate--br { right:6%; bottom:6%; text-align:right; }
.horizon { position:absolute; width:92%; height:42%; left:4%; top:29%; border:1px solid #84b7d16b; border-radius:50%; transform:rotate(-31deg); }
.horizon-b { transform:rotate(31deg); border-color:#9babea80; }
.horizon-c { transform:rotate(87deg); width:67%; left:16.5%; height:75%; top:11%; border-color:#9fcbd29a; }
.orbit { position:absolute; border:1px solid #8faee7aa; border-radius:50%; top:47.5%; left:50%; transform:translate(-50%,-50%); }
.orbit-outer { width:83%; aspect-ratio:1; border-style:dashed; border-color:#82aad78b; }
.orbit-mid { width:64%; aspect-ratio:1; border:2px solid #8cbddd70; box-shadow:0 0 0 15px #c9e9f323; }
.orbit-inner { width:42%; aspect-ratio:1; border:1px solid #77aad1aa; }
.orbital-line { position:absolute; width:88%; left:6%; top:47.5%; border-top:1px solid #8db7db70; }
.orbital-line-a { transform:rotate(17deg); } .orbital-line-b { transform:rotate(-57deg); } .orbital-line-c { transform:rotate(100deg); }
.orbit-dot { position:absolute; z-index:4; height:9px; width:9px; border-radius:50%; background:#35b9b3; box-shadow:0 0 0 5px #e3fcf3c9,0 0 0 11px #68bdba2b; }
.od-1 { top:12.5%; left:49.4%; } .od-2 { top:31%; right:10%; background:var(--blue); } .od-3 { top:73%; right:22%; background:var(--violet); }
.od-4 { top:68%; left:14%; } .od-5 { top:22%; left:23%; background:var(--violet); } .od-6 { top:47%; right:7%; background:#7bbda1; }
.habitat-core { position:absolute; z-index:5; top:47.5%; left:50%; transform:translate(-50%,-50%); width:33%; aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; background:radial-gradient(circle at 32% 27%,#efffff,#a9dfea 50%,#9faee8); border:1px solid #79a8d2; border-radius:50%; box-shadow:0 0 0 10px #e8f7ffb5,0 0 0 20px #9dbce04f,0 0 70px 26px #96c8e4a0,inset 0 0 20px #ffffffab; }
.core-ring { position:absolute; inset:9%; border:1px solid #ffffffba; border-radius:50%; } .core-ring-b { inset:17%; border-style:dashed; border-color:#5179c3a8; }
.core-type { z-index:1; color:#3e6fa7; font-size:clamp(22px,3.6vw,48px); font-weight:900; letter-spacing:-.11em; padding-right:.11em; line-height:1; }
.core-sub { z-index:1; color:#457799; font-size:clamp(6px,.7vw,9px); font-weight:850; text-align:center; letter-spacing:.15em; line-height:1.45; margin-top:7px; }
.orbital-tag { position:absolute; z-index:6; display:flex; gap:7px; align-items:center; background:#f8fdffe3; border:1px solid #adcddd; box-shadow:0 5px 15px #93b4d230; color:#587d9a; border-radius:8px; padding:7px 9px; letter-spacing:.08em; font-size:8px; font-weight:850; line-height:1.45; }
.orbital-tag i { flex-shrink:0; width:11px; height:11px; border:2px solid var(--turquoise); border-radius:50%; background:#d4f6ed; }
.node-a { left:6%; top:16%; } .node-b { right:5%; top:23%; } .node-c { left:2.5%; top:45%; }
.node-d { right:5%; top:57%; } .node-e { left:15%; bottom:18%; } .node-f { right:12%; bottom:17%; }
.node-b i,.node-e i { border-color:var(--violet); background:#eeeaff; }
.node-c i,.node-f i { border-color:var(--blue); background:#ddeaff; }
.habitat-title { position:absolute; z-index:7; bottom:5%; left:50%; transform:translateX(-50%); display:flex; gap:6px; align-items:center; white-space:nowrap; text-transform:uppercase; color:#567ba6; font-size:9px; font-weight:900; letter-spacing:.065em; }
.habitat-title span:not(:last-child)::after { content:" /"; color:#37aab1; }
/* Full-width habitat protocol */
.flow-field { position:relative; overflow:hidden; margin-bottom:54px; padding:21px 24px 19px; border-radius:17px; border:1px solid #bddde9; background:linear-gradient(105deg,#eff6ff,#e4f6f8 55%,#eff1fe); box-shadow:0 12px 38px #7da5c820; }
.flow-field::before { content:""; position:absolute; width:300px; height:300px; right:-60px; top:-180px; border-radius:50%; border:26px solid #c0d8ef35; }
.flow-field-head,.flow-field-foot { position:relative; display:flex; justify-content:space-between; align-items:center; gap:15px; color:#7792ab; font-size:9px; font-weight:800; letter-spacing:.13em; }
.flow-field-head strong { color:var(--blue); font-size:11px; }
.flow-field-path { position:relative; display:flex; align-items:center; padding:19px 0 15px; }
.flow-module { position:relative; z-index:1; display:flex; flex:1; flex-direction:column; gap:5px; min-width:0; padding:14px 15px; border-radius:10px; background:#ffffffbd; border:1px solid #c1d9e7; }
.fm-id { color:#84a0b5; font-size:8px; font-weight:800; letter-spacing:.14em; }
.flow-module strong { color:#46749c; font-size:10px; font-weight:850; letter-spacing:.05em; white-space:nowrap; }
.flow-module i { position:absolute; right:11px; top:10px; width:8px; height:8px; border-radius:50%; background:var(--turquoise); box-shadow:0 0 0 4px #d8f4f2; }
.fm-context i,.fm-output i { background:var(--violet); box-shadow:0 0 0 4px #e5e3fc; }
.fm-model { background:#e2f3f8; border-color:#98c6d8; } .fm-model strong { color:#24869a; }
.flow-connector { display:flex; flex:.2; align-items:center; justify-content:space-evenly; min-width:10px; border-top:2px solid #aacadb; }
.flow-connector span { display:block; width:3px; height:3px; margin-top:-2px; border-radius:50%; background:#78accb; }
/* Four illustrative studies alternate with editorial copy */
.editorial { margin-bottom:66px; }
.chapter { display:grid; grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr); gap:clamp(35px,5.3vw,88px); align-items:stretch; padding:65px 0; border-bottom:1px solid var(--line); }
.chapter:nth-child(even) { grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); }
.chapter:nth-child(even) .chapter-copy { order:2; } .chapter:nth-child(even) .chapter-visual { order:1; }
.chapter-copy { min-width:0; align-self:center; } .chapter-copy p:last-child { margin-bottom:0; }
.chapter-copy a[href=""] { text-decoration:none; color:#4e70d3; border-bottom:1px solid #b7c9ee; font-weight:720; }
.chapter-copy a[href=""]:hover { color:var(--turquoise); border-color:var(--turquoise); }
.chapter-visual { position:relative; isolation:isolate; overflow:hidden; min-height:320px; border:1px solid #c3dcea; border-radius:19px; background:radial-gradient(circle at 48% 47%,#fbffff,#e7f5fc 48%,#e7ebff); box-shadow:inset 0 0 33px #ffffffa0; }
.chapter-visual::before { content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg,transparent 0 31px,#9dbee51b 32px),repeating-linear-gradient(0deg,transparent 0 31px,#9dbee51b 32px); mask-image:radial-gradient(ellipse,#000 12%,transparent 82%); }
.chapter-visual::after { content:""; position:absolute; inset:10px; border:1px solid #c6ddf073; border-radius:12px; pointer-events:none; }
.chapter-visual-head { position:absolute; z-index:2; left:23px; right:23px; top:21px; display:flex; justify-content:space-between; gap:8px; color:#7896b4; font-size:9px; font-weight:800; letter-spacing:.13em; }
.chapter-visual-title { position:absolute; z-index:2; top:54px; left:23px; color:#4d74a1; font-size:14px; font-weight:900; letter-spacing:.15em; }
.chapter-visual-foot { position:absolute; bottom:18px; left:23px; right:23px; display:flex; justify-content:space-between; gap:8px; color:#7799b0; font-size:8px; font-weight:800; letter-spacing:.08em; }
.mesh-field,.layer-field,.route-field,.matrix-field { position:absolute; inset:87px 10px 37px; }
/* Constellation */
.mesh-field { background:radial-gradient(circle at 50% 48%,#92d7e348,transparent 47%); }
.mesh-thread { position:absolute; height:2px; background:linear-gradient(90deg,#78b3d66b,#719bea,#58bba0); transform-origin:0 50%; }
.mt1 { width:40%; left:18%; top:26%; transform:rotate(27deg); } .mt2 { width:39%; left:51%; top:45%; transform:rotate(-26deg); }
.mt3 { width:45%; left:15%; top:78%; transform:rotate(-30deg); } .mt4 { width:32%; left:28%; top:18%; transform:rotate(78deg); }
.mt5 { width:30%; left:76%; top:20%; transform:rotate(101deg); } .mt6 { width:33%; left:57%; top:47%; transform:rotate(67deg); }
.mt7 { width:24%; left:26%; top:57%; transform:rotate(-62deg); }
.mesh-node { position:absolute; z-index:1; width:15px; height:15px; border-radius:50%; background:#8ba8e5; border:4px solid #e8f8fc; box-shadow:0 0 0 5px #c7daf368; }
.mn1 { left:16%; top:24%; } .mn2 { left:70%; top:10%; background:#42b8ad; } .mn3 { right:12%; top:36%; background:#60b9c7; }
.mn4 { left:10%; top:75%; background:#42b8ad; } .mn5 { right:20%; bottom:13%; } .mn6 { left:42%; top:7%; background:#8d81d4; }
.mn7 { left:34%; bottom:10%; background:#8d81d4; }
.mesh-center { position:absolute; z-index:2; top:45%; left:50%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; justify-content:center; height:min(43%,138px); aspect-ratio:1; border:1px solid #80b7d1; border-radius:50%; background:radial-gradient(circle at 37% 25%,#f4ffff,#a5d8ec 72%,#9bafe8); box-shadow:0 0 0 10px #b7dbea52,0 0 0 23px #acc9e33b; color:#416f94; }
.mesh-center b { font-size:17px; letter-spacing:.05em; } .mesh-center small { margin-top:6px; font-size:8px; font-weight:750; letter-spacing:.1em; }
.mesh-label { position:absolute; color:#6386a4; font-size:8px; font-weight:850; letter-spacing:.12em; }
.mesh-label-a { left:17%; top:7%; } .mesh-label-b { right:7%; top:62%; } .mesh-label-c { left:14%; bottom:1%; }
/* Four-layer spatial stack */
.layer-field { perspective:520px; }
.plane { position:absolute; left:13%; width:74%; height:58px; padding:0 21px; display:flex; justify-content:space-between; align-items:center; border-radius:12px; transform:rotateX(52deg) rotateZ(-17deg); box-shadow:0 13px 0 #adcddc3a; }
.plane span { color:#447395; font-size:11px; font-weight:850; letter-spacing:.07em; white-space:nowrap; }
.plane i { width:9px; height:9px; border:2px solid #ffffffb2; border-radius:50%; background:#6fc0cf; }
.plane-one { z-index:4; top:4%; background:#d4f2f7e8; border:1px solid #8ed7dc; }
.plane-two { z-index:3; top:22%; background:#c7ddfcec; border:1px solid #92b2e9; }
.plane-three { z-index:2; top:40%; background:#ddd8faed; border:1px solid #b0a2ed; }
.plane-four { z-index:1; top:58%; background:#d7f2e6f2; border:1px solid #86cbbc; }
.layer-axis { position:absolute; right:0; top:40%; color:#7f9bb1; font-size:8px; font-weight:800; letter-spacing:.09em; transform:rotate(90deg); }
/* Decision branches */
.route-field { background:radial-gradient(ellipse at 50% 52%,#ddf4f6aa,transparent 62%); }
.route-line { position:absolute; height:2px; background:#85b8d5; transform-origin:0 50%; }
.rl1 { left:15%; top:31%; width:40%; transform:rotate(25deg); } .rl2 { left:50%; top:50%; width:39%; transform:rotate(-33deg); }
.rl3 { left:17%; top:67%; width:35%; transform:rotate(-24deg); background:#ac9adf; } .rl4 { left:49%; top:49%; width:37%; transform:rotate(38deg); background:#65c4b7; }
.rl5 { left:16%; top:30%; width:28%; transform:rotate(86deg); background:#b5d4e5; }
.route-point { position:absolute; z-index:2; width:70px; height:70px; border:1px solid #9ac6db; border-radius:18px; background:#e9f8fdf2; box-shadow:0 8px 15px #96b6d44a; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; }
.route-point b { color:var(--blue); font-size:21px; line-height:1; } .route-point small { color:#5d83a2; font-size:8px; font-weight:850; letter-spacing:.08em; }
.rp1 { left:9%; top:17%; } .rp2 { left:41%; top:33%; background:#e1f3fa; } .rp3 { right:7%; top:10%; background:#f0eafd; }
.rp4 { right:9%; bottom:9%; background:#def8f0; }
.route-caption { position:absolute; bottom:2%; left:11%; color:#809bb2; font-size:8px; font-weight:850; letter-spacing:.09em; }
/* Pattern field */
.matrix-field { display:flex; align-items:center; justify-content:center; }
.matrix-grid { width:190px; height:190px; display:grid; grid-template-columns:repeat(6,1fr); grid-template-rows:repeat(6,1fr); gap:5px; transform:rotate(-13deg); }
.matrix-grid span { display:block; border-radius:5px; border:1px solid #aac9e1; background:#e8f5fb; }
.matrix-grid span.lit { background:#9fded9; border-color:#6ec1c8; box-shadow:0 0 0 2px #ecffff87; }
.matrix-grid span:nth-child(5n) { background:#d2dbf8; }
.matrix-core { position:absolute; display:grid; gap:3px; padding:20px 25px; text-align:center; border:1px solid #7ab8c9; border-radius:13px; background:#f9feffeb; box-shadow:0 0 0 12px #d9f1fa7f,0 14px 25px #86b2d750; }
.matrix-core span,.matrix-core small { color:#6698aa; font-size:8px; font-weight:800; letter-spacing:.1em; }
.matrix-core strong { color:var(--blue); font-size:22px; letter-spacing:.07em; }
.matrix-caption { position:absolute; bottom:3%; color:#819cb0; font-size:8px; font-weight:800; letter-spacing:.09em; }
/* Evidence, tables, and calculator */
.metric-section,.data-section,.calculator { margin:0 0 75px; }
.metric-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:19px; }
.metric-figure { background:radial-gradient(circle at 100% 0,#eaf8fc,#fff 58%); border:1px solid #caddf0; border-radius:17px; padding:28px 27px; }
.metric-figure strong { display:block; color:var(--blue); font-size:clamp(29px,3.5vw,48px); font-weight:870; letter-spacing:-.05em; }
.metric-figure > span { display:block; margin:6px 0 26px; color:#627f95; font-size:13px; font-weight:680; }
.meter { height:10px; border-radius:20px; background:#dce8f4; overflow:hidden; }
.meter span { display:block; height:100%; margin:0; border-radius:20px; background:linear-gradient(90deg,#46c1b7,#517cde); }
.meter-eu span { width:20%; } .meter-pl span { width:8.4%; }
.metric-diff { background:linear-gradient(145deg,#e9faf9,#e8f0fc); } .metric-diff strong { color:#268ea1; }
.metric-detail { color:#5a7b91; font-size:13px; line-height:1.7; }
.source-note { color:#687f93; font-size:12px; line-height:1.7; margin:15px 0 0; }
.table-scroll { overflow-x:auto; border:1px solid #cbddeb; border-radius:14px; background:white; }
table { border-collapse:collapse; width:100%; font-size:14px; }
th,td { padding:19px 22px; text-align:left; vertical-align:top; border-bottom:1px solid #deebf3; }
tr:last-child th,tr:last-child td { border-bottom:0; }
thead { background:#e7f3fa; color:#4d7093; } tbody th { font-weight:770; } tbody td { color:#5c7790; }
.calculator { background:linear-gradient(130deg,#e6f5fb,#e9f1ff); padding:clamp(24px,3.3vw,43px); border:1px solid #bdd7e9; border-radius:20px; }
.calculator-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:25px; }
.field { display:flex; flex-direction:column; gap:9px; } .field label { color:#436c91; font-size:13px; font-weight:700; }
.field input { width:100%; height:49px; padding:0 13px; background:#fff; border:1px solid #b8d1e3; border-radius:9px; color:var(--ink); font:16px system-ui,sans-serif; }
.calc-actions { grid-column:1/-1; display:flex; align-items:center; flex-wrap:wrap; gap:20px; }
.calc-actions button { padding:13px 25px; border:0; border-radius:9px; background:var(--blue); color:#fff; font:800 14px system-ui,sans-serif; cursor:pointer; }
.calc-actions button:hover { background:var(--turquoise); } .calc-actions output { color:#3c7296; font-size:14px; font-weight:760; }
.sources { border-top:1px solid var(--line); padding-top:30px; margin:0 0 76px; }
.sources ol { margin:0; padding-left:23px; } .sources li { margin-bottom:10px; color:#607b94; font-size:13px; line-height:1.8; }
/* CSS visual miniatures in related topics */
.next-section { padding:65px 0 79px; background:radial-gradient(ellipse at 7% 0,#e3f7f8,transparent 47%),linear-gradient(140deg,#edf4fd,#f5f8ff); border-top:1px solid #d7e7ef; }
.next-intro { display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:20px; } .next-intro h2 { margin-bottom:0; }
.next-intro > span { color:#7194ad; font-size:9px; font-weight:850; letter-spacing:.13em; }
.next-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.next-link { display:block; overflow:hidden; border:1px solid #c5daeb; border-radius:16px; background:#fff; text-decoration:none; transition:border-color .15s; }
.next-link:hover { border-color:#7abacb; }
.next-art { display:block; position:relative; overflow:hidden; height:134px; background:radial-gradient(circle at 50% 50%,#c5e8f3,#eef4fc 70%); border-bottom:1px solid #d2e6ee; }
.next-art::before,.next-art::after { content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); border:1px solid #94bfe0; border-radius:50%; }
.next-art::before { width:100px; height:100px; } .next-art::after { width:157px; height:157px; border-style:dashed; }
.next-art i { position:absolute; z-index:2; width:11px; height:11px; border-radius:50%; background:#45b8bd; box-shadow:0 0 0 5px #daf9f4; }
.next-art i:nth-child(1) { left:19%; top:25%; } .next-art i:nth-child(2) { left:41%; top:50%; background:#5b86d9; }
.next-art i:nth-child(3) { right:13%; top:32%; } .next-art i:nth-child(4) { right:29%; bottom:13%; background:#9c8ade; }
.next-art i:nth-child(5) { left:13%; bottom:22%; } .next-art i:nth-child(6) { right:48%; top:12%; background:#9c8ade; }
.next-link--cascade .next-art { background:repeating-linear-gradient(-19deg,transparent 0 21px,#accde837 22px,transparent 24px),linear-gradient(120deg,#e8f6fe,#e9efff); }
.next-link--cascade .next-art::before { width:190px; height:80px; transform:translate(-50%,-50%) rotate(-18deg); border-radius:16px; }
.next-link--cascade .next-art::after { width:230px; height:114px; transform:translate(-50%,-50%) rotate(-18deg); border-radius:16px; }
.next-link--contour .next-art { background:radial-gradient(ellipse at 72% 60%,#b8e8e0,transparent 57%),linear-gradient(145deg,#eef7fe,#e8efff); }
.next-link--contour .next-art::before { width:210px; height:70px; transform:translate(-50%,-50%) rotate(24deg); }
.next-link--contour .next-art::after { width:260px; height:115px; transform:translate(-50%,-50%) rotate(-20deg); }
.next-info { display:flex; flex-direction:column; gap:8px; padding:20px 22px 23px; }
.next-info strong { color:#41698d; font-size:19px; font-weight:780; } .next-info small { color:#70869b; font-size:13px; }
.next-arrow { float:right; position:relative; margin:-55px 20px 15px; color:var(--turquoise); font-size:26px; }
/* SINH footer signature */
.site-footer { position:relative; overflow:hidden; padding:67px 0 31px; background:#faffff; }
.footer-orbit { position:absolute; pointer-events:none; left:-90px; bottom:-210px; width:440px; height:440px; border:1px solid #9ccbdc66; border-radius:50%; }
.footer-orbit i { position:absolute; inset:20px; border:1px solid #a1c9d94c; border-radius:50%; }
.footer-orbit i:nth-child(2) { inset:55px; } .footer-orbit i:nth-child(3) { inset:95px; } .footer-orbit i:nth-child(4) { inset:145px; background:#d9f3f8b8; }
.footer-top { display:flex; align-items:start; justify-content:space-between; gap:65px; position:relative; }
.footer-identity { min-width:245px; } .footer-identity strong { display:block; color:#4b70b8; font-size:clamp(47px,6vw,75px); letter-spacing:-.09em; line-height:1; }
.footer-identity span { display:block; color:#4a94a7; margin-top:13px; font-size:12px; text-transform:uppercase; line-height:1.45; letter-spacing:.15em; font-weight:800; }
.footer-links { display:grid; grid-template-columns:repeat(3,minmax(105px,1fr)); gap:16px 24px; width:min(100%,670px); }
.footer-links a { color:#567993; font-size:13px; font-weight:660; text-decoration:none; } .footer-links a:hover { color:var(--turquoise); }
.footer-bottom { display:flex; gap:20px; justify-content:space-between; border-top:1px solid #d7e8f0; margin-top:57px; padding-top:22px; color:#7b99ac; font-size:10px; letter-spacing:.08em; font-weight:750; }
@media(max-width:1170px) {
    .main-nav { gap:12px; } .header-inner { gap:15px; } .identity-name small { font-size:7px; }
    .hero { gap:25px; } .eyebrow { flex-wrap:wrap; }
    .flow-module { padding-inline:9px; } .flow-module strong { font-size:9px; }
}
@media(max-width:990px) {
    .main-nav { display:none; }
    .mobile-menu { display:block; position:relative; margin-left:auto; }
    .mobile-menu summary { display:flex; align-items:center; gap:13px; padding:11px 14px; border:1px solid #c7dfe9; border-radius:10px; background:#eaf6f9; color:#42749c; cursor:pointer; list-style:none; font-size:13px; font-weight:790; }
    .mobile-menu summary::-webkit-details-marker { display:none; }
    .menu-lines { display:grid; gap:4px; } .menu-lines i { display:block; width:17px; height:2px; background:#479db0; }
    .mobile-links { position:absolute; z-index:50; right:0; top:calc(100% + 12px); width:min(83vw,390px); max-height:72vh; overflow-y:auto; padding:14px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:3px 8px; border:1px solid #c4ddeb; border-radius:15px; background:#fff; box-shadow:0 15px 45px #7696b948; }
    .mobile-links a { padding:12px 11px; color:#56809e; text-decoration:none; font-size:13px; font-weight:700; }
    .mobile-links a[aria-current="page"] { background:#e5f3f9; border-radius:7px; color:var(--blue); }
    .hero { grid-template-columns:minmax(0,1fr); padding:57px 0 48px; }
    .hero-copy,.hero p { max-width:800px; } .habitat-art { max-width:690px; width:min(100%,690px); }
    .chapter { gap:28px; grid-template-columns:minmax(0,1fr) minmax(0,.95fr); }
    .chapter:nth-child(even) { grid-template-columns:minmax(0,.95fr) minmax(0,1fr); }
    .flow-module { padding:12px 7px; } .flow-module strong { font-size:8px; }
}
@media(max-width:700px) {
    .chapter,.chapter:nth-child(even) { display:flex; flex-direction:column; gap:22px; padding:45px 0; }
    .chapter:nth-child(even) .chapter-copy,.chapter:nth-child(even) .chapter-visual { order:initial; }
    .chapter-visual { height:300px; min-height:300px; }
    .next-grid,.metric-grid { grid-template-columns:1fr; gap:15px; }
    .next-link { display:grid; grid-template-columns:140px 1fr; align-items:center; position:relative; }
    .next-art { height:135px; border-bottom:0; border-right:1px solid #d2e6ee; }
    .next-info { padding:16px; } .next-arrow { position:absolute; right:8px; top:16px; margin:0; }
    .flow-field { padding:19px; margin-bottom:15px; }
    .flow-field-path { flex-direction:column; align-items:stretch; gap:0; }
    .flow-module { flex:auto; flex-direction:row; gap:16px; align-items:center; padding:12px 16px; }
    .flow-module .fm-id { min-width:80px; } .flow-module strong { font-size:10px; } .flow-module i { right:16px; top:16px; }
    .flow-connector { flex:auto; min-height:13px; width:2px; border-top:0; background:#9ec5db; align-self:center; } .flow-connector span { display:none; }
    .flow-field-head span:last-child,.flow-field-foot span:last-child { display:none; }
    .footer-top { flex-direction:column; gap:32px; } .footer-links { width:100%; }
}
@media(max-width:460px) {
    .shell { padding-inline:20px; } .header-inner { padding:14px 20px; }
    .identity-monogram { width:39px; height:39px; font-size:26px; line-height:37px; }
    .identity-name { font-size:20px; } .identity-name small { font-size:7px; }
    .hero { padding:37px 0 28px; gap:32px; } .hero-motto { font-size:22px; margin-bottom:25px; }
    h1,h2 { overflow-wrap:anywhere; } .eyebrow { gap:8px; } .eyebrow-chapter { font-size:9px; }
    .hero-legend { gap:5px; margin-top:23px; } .hero-legend span { font-size:8px; padding:5px; gap:4px; } .hero-legend b { height:19px; width:19px; }
    .habitat-art { border-radius:20px; } .habitat-coordinate { font-size:6px; }
    .orbital-tag { font-size:6px; padding:5px 6px; gap:4px; } .orbital-tag i { width:8px; height:8px; border-width:1.5px; }
    .habitat-title { font-size:6.3px; gap:4px; } .core-type { font-size:27px; } .core-sub { font-size:6px; } .orbit-dot { width:6px; height:6px; }
    .flow-field-head strong { font-size:9px; } .flow-field-head,.flow-field-foot { font-size:8px; } .flow-module strong { font-size:9px; }
    .chapter-visual { height:280px; min-height:280px; } .chapter-visual-title { font-size:11px; }
    .mesh-center b { font-size:12px; } .mesh-center small { font-size:6px; }
    .plane { left:8%; width:83%; padding-inline:9px; } .plane span { font-size:8px; } .plane i { width:6px; height:6px; }
    .route-point { width:59px; height:59px; } .route-point small { font-size:6px; }
    .next-intro > span { display:none; } .next-link { grid-template-columns:115px 1fr; }
    .next-art { height:127px; } .next-info strong { font-size:16px; } .next-info small { font-size:12px; }
    .footer-links { grid-template-columns:repeat(2,minmax(0,1fr)); } .footer-bottom { flex-direction:column; gap:8px; }
    .calculator-grid { grid-template-columns:1fr; } .calc-actions { gap:15px; }
    th,td { padding:14px 12px; font-size:12px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }