:root {
  --ink: #082733;
  --ink-2: #124657;
  --brine: #0a3342;
  --brine-deep: #061f2b;
  --paper: #f7fbfa;
  --crystal: #ffffff;
  --mist: #dfeeea;
  --line: #9fc1bd;
  --cyan: #41c7c7;
  --pink: #e65f91;
  --ember: #ef7448;
  --gold: #e8b74b;
  --wood: #9b663f;
  --leaf: #70a86c;
  --muted: #5c7278;
  --shadow: 0 24px 70px rgba(4,31,43,.16);
  --shell: min(1180px, calc(100vw - 40px));
  --display: "Cormorant Garamond", Georgia, serif;
  --body: "DM Sans", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); color: var(--ink); }
body { margin: 0; font-family: var(--body); font-size: 17px; line-height: 1.62; background: var(--paper); color: var(--ink); }
a { color: inherit; text-underline-offset: .2em; }
button, input { font: inherit; }
button { color: inherit; }
img, svg { display: block; max-width: 100%; }
.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.skip-link { position: fixed; z-index: 999; left: 12px; top: -60px; background: white; color: var(--ink); padding: 10px 14px; border-radius: 8px; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.site-header { position: sticky; top:0; z-index:50; border-bottom:1px solid rgba(255,255,255,.12); background:rgba(6,31,43,.92); backdrop-filter: blur(14px); color:white; }
.header-inner { width:var(--shell); margin:auto; min-height:58px; display:flex; align-items:center; gap:18px; }
.brand { font-family:var(--mono); font-size:.78rem; letter-spacing:.1em; text-decoration:none; white-space:nowrap; }
.section-nav { display:flex; gap:4px; flex:1; overflow-x:auto; scrollbar-width:none; }
.section-nav::-webkit-scrollbar { display:none; }
.section-nav a, .language-link { display:inline-flex; min-height:40px; align-items:center; padding:7px 10px; border-radius:999px; text-decoration:none; font-size:.78rem; white-space:nowrap; color:#dcebea; }
.section-nav a:hover, .language-link:hover { background:rgba(255,255,255,.1); color:white; }
.language-link { border:1px solid rgba(255,255,255,.22); }
.hero { position:relative; min-height:calc(100vh - 58px); overflow:hidden; background:
  radial-gradient(circle at 82% 30%, rgba(230,95,145,.24), transparent 24%),
  radial-gradient(circle at 62% 70%, rgba(65,199,199,.18), transparent 30%),
  linear-gradient(145deg, var(--brine-deep), #0b3b4b 58%, #0c4f5c); color:white; }
.hero::before { content:""; position:absolute; inset:0; opacity:.18; background-image:linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px); background-size:72px 72px; transform:perspective(500px) rotateX(60deg) scale(1.4) translateY(18%); transform-origin:center bottom; }
.hero-inner { position:relative; z-index:2; width:var(--shell); margin:auto; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr); gap:56px; align-items:center; min-height:calc(100vh - 58px); padding:78px 0 58px; }
.eyebrow, .kicker { font-family:var(--mono); font-size:.72rem; letter-spacing:.15em; text-transform:uppercase; font-weight:600; }
.eyebrow { color:#a9e8e4; }
h1 { font-family:var(--display); font-size:clamp(4.8rem, 11vw, 9.6rem); line-height:.78; letter-spacing:-.055em; margin:.18em 0 .2em; font-weight:600; text-wrap:balance; }
.hero-deck { max-width:670px; font-family:var(--display); font-size:clamp(1.6rem,3vw,2.7rem); line-height:1.12; color:#f8dfe8; margin:0 0 22px; }
.hero-lede { max-width:690px; font-size:1.08rem; color:#d7e9e7; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:28px; }
.primary-link { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:10px 18px; border-radius:999px; text-decoration:none; background:white; color:var(--ink); font-weight:700; box-shadow:0 12px 28px rgba(0,0,0,.18); }
.hero-note { font-family:var(--mono); font-size:.74rem; color:#a9c8c8; }
.crystal-stage { position:relative; min-height:560px; container-type:inline-size; }
.crystal { position:absolute; inset:10% 7% 12% 7%; filter:drop-shadow(0 42px 45px rgba(0,0,0,.3)); animation:floatCrystal 8s ease-in-out infinite; }
.crystal polygon { stroke:rgba(255,255,255,.6); stroke-width:1.2; }
.crystal .f1 { fill:rgba(255,255,255,.82); }
.crystal .f2 { fill:rgba(119,226,221,.45); }
.crystal .f3 { fill:rgba(230,95,145,.38); }
.crystal .f4 { fill:rgba(255,255,255,.2); }
.crystal-lines { position:absolute; inset:0; opacity:.7; }
.crystal-lines path { fill:none; stroke:#8edbd7; stroke-width:1.2; stroke-dasharray:5 9; animation:dash 9s linear infinite; }
.hero-stats { position:absolute; left:0; right:0; bottom:0; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.hero-stat { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:16px; padding:15px; backdrop-filter:blur(8px); }
.hero-stat strong { display:block; font-family:var(--mono); font-size:clamp(1.1rem, 5cqi, 2rem); white-space:nowrap; font-variant-numeric:tabular-nums; }
.hero-stat span { display:block; color:#bcd2d1; font-size:.72rem; line-height:1.35; margin-top:4px; }
@keyframes floatCrystal { 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-14px) rotate(2deg)} }
@keyframes dash { to{stroke-dashoffset:-140} }
main { overflow:hidden; }
.section { padding:108px 0; }
.section-inner { width:var(--shell); margin:auto; }
.kicker { color:var(--pink); margin-bottom:12px; }
h2 { font-family:var(--display); font-size:clamp(2.8rem,7vw,5.7rem); line-height:.94; letter-spacing:-.045em; margin:0 0 28px; max-width:980px; font-weight:600; text-wrap:balance; }
h3 { font-family:var(--display); font-size:clamp(1.55rem,3vw,2.2rem); line-height:1.06; margin:0 0 14px; }
p { margin:0 0 1.1em; }
.intro { max-width:780px; font-size:1.08rem; color:var(--ink-2); }
.prose-large { font-size:1.13rem; }
.pullquote { margin:34px 0; padding:30px 0 30px 30px; border-left:7px solid var(--pink); font-family:var(--display); font-size:clamp(1.65rem,4vw,3rem); line-height:1.06; color:var(--ink-2); }
.electric-section { background:linear-gradient(180deg,#f7fbfa 0%,#eaf4f2 100%); }
.electric-heading { max-width:1020px; }
.electric-heading h2 { max-width:900px; }
.electric-intro { max-width:850px; font-family:var(--display); font-size:clamp(1.45rem,3vw,2.25rem); line-height:1.16; color:var(--ink-2); }
.electric-layout { margin-top:52px; display:grid; grid-template-columns:minmax(0,.86fr) minmax(500px,1.14fr); gap:50px; align-items:start; }
.electric-copy { padding-top:10px; }
.electric-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:30px; }
.electric-facts article { min-height:168px; padding:20px; border:1px solid #bdd3cf; border-radius:20px; background:rgba(255,255,255,.78); }
.electric-facts h3 { font-size:1.45rem; color:var(--pink); }
.electric-facts p { margin:0; color:var(--muted); font-size:.82rem; line-height:1.48; }
.inline-sources { display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:24px; font-family:var(--mono); font-size:.66rem; color:var(--ink-2); }
.ion-stage { position:sticky; top:88px; min-height:620px; overflow:hidden; border-radius:34px; border:1px solid rgba(255,255,255,.16); background:#061f2b; color:white; box-shadow:var(--shadow); display:grid; grid-template-rows:1fr 48px 1fr auto; isolation:isolate; }
.ion-stage::before { content:""; position:absolute; inset:0; opacity:.22; background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px); background-size:42px 42px; z-index:-1; }
.ion-zone { position:relative; padding:28px 32px; }
.ion-outside { background:radial-gradient(circle at 30% 20%,rgba(65,199,199,.18),transparent 45%); }
.ion-inside { background:radial-gradient(circle at 75% 80%,rgba(230,95,145,.14),transparent 45%); }
.ion-zone-label { display:block; font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; color:#a9d8d5; }
.ion-cloud { margin-top:18px; display:grid; grid-template-columns:repeat(6,1fr); gap:12px; align-items:center; }
.ion-cloud i { width:46px; height:46px; display:grid; place-items:center; border-radius:50%; font-style:normal; font-family:var(--mono); font-size:.67rem; font-weight:700; box-shadow:0 8px 18px rgba(0,0,0,.24); transition:transform .55s,opacity .55s; }
.sodium-cloud i { background:linear-gradient(145deg,#bbf2ef,#41c7c7); color:#07303b; }
.potassium-cloud i { background:linear-gradient(145deg,#ffe2ed,#e65f91); color:#552038; }
.ion-cloud i:nth-child(2n){transform:translateY(10px)}.ion-cloud i:nth-child(3n){transform:translateX(8px)}
.cell-membrane { position:relative; z-index:4; display:grid; align-content:center; gap:4px; padding:0 18px; background:rgba(6,31,43,.82); }
.cell-membrane>div { display:grid; grid-template-columns:repeat(22,1fr); gap:5px; }
.cell-membrane i { display:block; aspect-ratio:1; border-radius:50%; background:#e9c85f; box-shadow:0 0 8px rgba(232,183,75,.45); }
.ion-channel { position:absolute; z-index:7; left:28%; top:calc(50% - 46px); width:72px; height:94px; border-radius:20px; border:3px solid #74dad6; background:#0b4050; box-shadow:0 0 0 8px rgba(65,199,199,.09); transition:transform .35s,box-shadow .35s; }
.ion-channel span { position:absolute; width:120px; left:50%; top:-28px; transform:translateX(-50%); text-align:center; font-family:var(--mono); font-size:.58rem; color:#9ee6e2; }
.ion-channel i { position:absolute; top:14px; bottom:14px; width:18px; background:#75d6d2; border-radius:8px; transition:transform .35s; }
.ion-channel i:first-of-type{left:13px;transform:rotate(12deg)}.ion-channel i:last-of-type{right:13px;transform:rotate(-12deg)}
.ion-pump { position:absolute; z-index:7; right:8%; top:calc(50% - 54px); width:132px; min-height:108px; border-radius:24px; background:linear-gradient(145deg,#fff,#d8ebe8); color:var(--ink); padding:15px 16px; box-shadow:0 14px 28px rgba(0,0,0,.28); transition:transform .35s,box-shadow .35s; }
.ion-pump strong { display:block; font-family:var(--mono); font-size:1rem; color:var(--pink); }
.ion-pump span { display:block; font-family:var(--mono); font-size:.55rem; line-height:1.4; margin-top:5px; }
.pump-arrow { position:absolute; font-style:normal; font-size:1.45rem; color:var(--cyan); opacity:.55; }.pump-arrow.up{right:15px;top:-25px}.pump-arrow.down{left:16px;bottom:-28px;color:var(--pink)}
.impulse-track { position:absolute; z-index:6; left:6%; right:6%; top:50%; height:4px; background:rgba(255,255,255,.13); overflow:visible; }
.impulse-track i { position:absolute; left:0; top:-8px; width:20px; height:20px; border-radius:50%; background:white; box-shadow:0 0 0 8px rgba(65,199,199,.22),0 0 30px #41c7c7; opacity:0; }
.ion-controls { z-index:8; display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:center; padding:20px 24px; background:rgba(255,255,255,.08); border-top:1px solid rgba(255,255,255,.12); }
.ion-controls button { min-height:44px; border:0; border-radius:999px; padding:9px 16px; background:white; color:var(--ink); font-weight:700; cursor:pointer; }
.ion-controls p { margin:0; min-height:48px; color:#cce0de; font-size:.76rem; line-height:1.42; }
.ion-stage[data-phase="signal"] .ion-channel { box-shadow:0 0 0 10px rgba(65,199,199,.2),0 0 38px rgba(65,199,199,.6); }
.ion-stage[data-phase="signal"] .ion-channel i:first-of-type{transform:translateX(-10px) rotate(25deg)}.ion-stage[data-phase="signal"] .ion-channel i:last-of-type{transform:translateX(10px) rotate(-25deg)}
.ion-stage[data-phase="signal"] .sodium-cloud i:nth-child(-n+4){transform:translateY(150px);opacity:.2}
.ion-stage[data-phase="signal"] .impulse-track i{opacity:1;animation:impulse 1.15s ease-in-out forwards}
.ion-stage[data-phase="reset"] .ion-pump { transform:scale(1.05); box-shadow:0 0 0 10px rgba(230,95,145,.15),0 18px 42px rgba(0,0,0,.36); }
.ion-stage[data-phase="reset"] .pump-arrow{opacity:1;animation:pumpArrow .55s ease-in-out infinite alternate}
@keyframes impulse{from{left:0}to{left:calc(100% - 20px)}}
@keyframes pumpArrow{to{transform:translateY(-7px)}}
.appetite-section { background:linear-gradient(145deg,#fff8fb,#f2fbf9); }
.appetite-layout { display:grid; grid-template-columns:minmax(0,1.06fr) minmax(360px,.94fr); gap:66px; align-items:start; }
.appetite-memory { margin-top:22px; font-family:var(--display); font-size:clamp(1.65rem,3vw,2.45rem); line-height:1.08; color:var(--pink); }
.appetite-cards { display:grid; gap:22px; }
.lick-card,.taste-card { position:relative; border-radius:30px; padding:32px; box-shadow:var(--shadow); overflow:hidden; }
.lick-card { background:var(--brine); color:white; }
.lick-card p { color:#cbdedc; font-size:.88rem; }
.lick-visual { position:relative; height:230px; margin:-8px 0 22px; }
.lick-core { position:absolute; left:50%; top:50%; width:86px; height:86px; margin:-43px; border-radius:50%; display:grid; place-items:center; background:radial-gradient(circle at 35% 30%,#fff,#f4c9d9 38%,#e65f91); color:#542039; font-family:var(--mono); font-style:normal; font-weight:700; box-shadow:0 0 0 14px rgba(230,95,145,.12),0 0 42px rgba(230,95,145,.35); }
.track { position:absolute; font-style:normal; color:#9adbd7; opacity:.72; transform:rotate(var(--r)); }.t0{left:4%;top:16%;--r:35deg}.t1{left:20%;top:31%;--r:44deg}.t2{left:10%;bottom:15%;--r:-20deg}.t3{left:29%;bottom:30%;--r:-15deg}.t4{right:6%;top:13%;--r:-35deg}.t5{right:24%;top:32%;--r:-44deg}.t6{right:8%;bottom:14%;--r:20deg}.t7{right:29%;bottom:29%;--r:15deg}.t8{left:48%;top:4%;--r:90deg}
.taste-card { background:var(--mist); }
.taste-card::before { content:"Na⁺"; position:absolute; right:-18px; top:-38px; font-family:var(--mono); font-size:8rem; color:rgba(8,39,51,.07); font-weight:700; }
.taste-diagram { height:130px; margin:20px 0; display:grid; grid-template-columns:repeat(8,1fr); align-items:end; gap:7px; }
.taste-diagram i { display:block; border-radius:999px 999px 10px 10px; background:linear-gradient(to top,var(--brine),var(--cyan)); }
.taste-diagram i:nth-child(1){height:35%}.taste-diagram i:nth-child(2){height:52%}.taste-diagram i:nth-child(3){height:74%}.taste-diagram i:nth-child(4){height:96%}.taste-diagram i:nth-child(5){height:82%}.taste-diagram i:nth-child(6){height:61%}.taste-diagram i:nth-child(7){height:44%}.taste-diagram i:nth-child(8){height:28%}
.surplus-band { position:relative; overflow:hidden; background:#fff; border-top:1px solid #d9e5e2; border-bottom:1px solid #d9e5e2; }
.surplus-inner { display:grid; grid-template-columns:minmax(220px,.72fr) minmax(0,1.28fr); gap:52px; align-items:center; padding-top:58px; padding-bottom:58px; }
.surplus-grains { min-height:168px; position:relative; border-radius:24px; background:linear-gradient(105deg,#f8f3e7 0 38%,#f2ccd9 100%); overflow:hidden; }
.surplus-grains::before { content:""; position:absolute; inset:0; opacity:.75; background-image:radial-gradient(circle,#fff 0 5px,transparent 6px),radial-gradient(circle,#e65f91 0 3px,transparent 4px); background-position:10px 12px,25px 27px; background-size:34px 34px,42px 42px; transform:skewX(-8deg) scale(1.12); }
.surplus-grains::after { content:"Na⁺"; position:absolute; inset:auto 22px 18px auto; font:700 2rem var(--mono); color:var(--brine); }
.surplus-copy h2 { max-width:790px; font-size:clamp(2.2rem,4.8vw,4.5rem); }
.surplus-copy > p { max-width:780px; color:var(--muted); font-size:1.02rem; }
.surplus-sources { display:flex; flex-wrap:wrap; gap:12px; }
.terrain-section { background:linear-gradient(180deg,#eef8f6,#fff); }
.terrain-layout { margin-top:44px; display:grid; grid-template-columns:minmax(0,.86fr) minmax(360px,1.14fr); gap:28px; align-items:start; }
.terrain-buttons { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.terrain-button { min-height:142px; border:1px solid #bcd3cf; background:white; border-radius:20px; padding:18px; text-align:left; cursor:pointer; transition:transform .2s, border-color .2s, box-shadow .2s; }
.terrain-button:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(8,39,51,.09); }
.terrain-button[aria-pressed="true"] { border-color:var(--pink); box-shadow:0 0 0 3px rgba(230,95,145,.15); background:#fff8fb; }
.terrain-icon { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:var(--mist); margin-bottom:14px; font-size:1.4rem; }
.terrain-button strong { display:block; font-size:.98rem; line-height:1.25; }
.terrain-button span { display:block; margin-top:6px; color:var(--muted); font-size:.78rem; line-height:1.3; }
.terrain-result { position:sticky; top:88px; min-height:430px; border-radius:30px; background:var(--brine); color:white; padding:36px; overflow:hidden; box-shadow:var(--shadow); }
.terrain-result::before, .terrain-result::after { content:""; position:absolute; border:1px solid rgba(255,255,255,.14); transform:rotate(45deg); }
.terrain-result::before { width:300px; height:300px; right:-130px; top:-120px; }
.terrain-result::after { width:220px; height:220px; right:-120px; bottom:-110px; }
.terrain-result > * { position:relative; z-index:2; }
.result-energy { font-family:var(--mono); color:#a9e8e4; font-size:.75rem; }
.result-cases { display:flex; flex-wrap:wrap; gap:8px; margin-top:26px; }
.result-case { display:inline-flex; padding:7px 10px; border:1px solid rgba(255,255,255,.2); border-radius:999px; font-size:.74rem; }
.atlas-section { background:var(--brine-deep); color:white; }
.atlas-section .intro { color:#bad2d0; }
.filter-row { display:flex; flex-wrap:wrap; gap:8px; margin:30px 0 20px; }
.filter-button { min-height:42px; padding:7px 13px; border-radius:999px; border:1px solid rgba(255,255,255,.2); background:transparent; color:#d8e8e7; cursor:pointer; }
.filter-button[aria-pressed="true"] { background:white; color:var(--ink); border-color:white; }
.map-shell { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(340px,.65fr); gap:20px; align-items:start; }
.map-stage { position:relative; width:100%; min-width:0; min-height:0; aspect-ratio:360/145; align-self:start; border:1px solid rgba(255,255,255,.16); border-radius:28px; overflow:hidden; background:#092c3a; }
.map-stage > img { width:100%; height:100%; object-fit:fill; opacity:.95; }
.map-grid { position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px); background-size:12.5% 25%; }
.map-marker { --marker-color:var(--pink); --marker-halo:rgba(230,95,145,.22); position:absolute; width:44px; height:44px; margin:-22px 0 0 -22px; padding:0; border:0; border-radius:50%; background:transparent; cursor:pointer; z-index:5; transform:translate(var(--dx,0),var(--dy,0)); transition:opacity .2s; }
.map-marker::before { content:""; position:absolute; inset:12px; border:3px solid white; border-radius:50%; background:var(--marker-color); box-shadow:0 0 0 7px var(--marker-halo); transition:transform .18s,box-shadow .18s; }
.map-marker::after { content:""; position:absolute; inset:5px; border:1px solid transparent; border-radius:50%; }
.map-marker:hover::before,.map-marker:focus-visible::before,.map-marker[aria-pressed="true"]::before { transform:scale(1.3); box-shadow:0 0 0 8px var(--marker-halo); }
.map-marker:focus-visible { outline:2px solid white; outline-offset:1px; }
.map-marker[data-method="fire"]{--marker-color:var(--ember);--marker-halo:rgba(239,116,72,.22)}
.map-marker[data-method="sun"],.map-marker[data-method="sand"]{--marker-color:var(--gold);--marker-halo:rgba(232,183,75,.22)}
.map-marker[data-method="water"],.map-marker[data-method="soil"]{--marker-color:var(--cyan);--marker-halo:rgba(65,199,199,.22)}
.map-marker[data-method="plant"]{--marker-color:var(--leaf);--marker-halo:rgba(112,168,108,.22)}
.map-marker.is-hidden { opacity:.08; pointer-events:none; }
.map-cluster { position:absolute; width:44px; height:44px; margin:-22px 0 0 -22px; z-index:12; }
.map-cluster-toggle { position:absolute; inset:0; border:0; border-radius:50%; padding:0; cursor:pointer; color:white; background:transparent; font:700 .58rem var(--mono); }
.map-cluster-toggle::before { content:""; position:absolute; inset:9px; z-index:-1; border:3px solid white; border-radius:50%; background:conic-gradient(var(--ember) 0 50%,var(--cyan) 50%); box-shadow:0 0 0 7px rgba(255,255,255,.13); transition:transform .16s,box-shadow .16s; }
.map-cluster[data-cluster="sichuan"] .map-cluster-toggle::before { background:conic-gradient(var(--ember) 0 50%,var(--pink) 50%); }
.map-cluster-toggle:hover::before,.map-cluster-toggle:focus-visible::before,.map-cluster.has-selection .map-cluster-toggle::before { transform:scale(1.16); box-shadow:0 0 0 8px rgba(230,95,145,.25); }
.map-cluster-toggle:focus-visible { outline:2px solid white; outline-offset:9px; }
.map-cluster-menu { position:absolute; left:50%; top:calc(100% + 12px); display:flex; gap:6px; padding:7px; border:1px solid rgba(255,255,255,.24); border-radius:999px; background:#061f2b; box-shadow:0 12px 28px rgba(0,0,0,.35); opacity:0; visibility:hidden; pointer-events:none; transform:translate(-50%,-6px); transition:opacity .16s,transform .16s; }
.map-cluster.is-open .map-cluster-menu { opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0); }
.map-cluster-menu .map-marker { position:relative; inset:auto!important; flex:0 0 44px; margin:0; transform:none; }
.map-cluster.is-hidden { display:none; }
.map-detail { min-width:0; border:1px solid rgba(255,255,255,.16); border-radius:28px; padding:30px; background:rgba(255,255,255,.06); min-height:420px; display:flex; flex-direction:column; }
.map-detail .date { font-family:var(--mono); color:#a9e8e4; font-size:.74rem; }
.map-detail h3 { margin-top:10px; }
.map-detail p { color:#cfe0df; font-size:.92rem; }
.detail-meta { margin-top:auto; display:grid; gap:12px; padding-top:18px; border-top:1px solid rgba(255,255,255,.13); }
.detail-meta span { display:block; font-family:var(--mono); font-size:.66rem; color:#82aaa7; text-transform:uppercase; letter-spacing:.09em; }
.detail-meta strong { display:block; font-size:.85rem; margin-top:2px; }
.source-link { display:inline-flex; align-items:center; gap:7px; margin-top:18px; color:white; font-size:.82rem; }
.map-legend { display:flex; flex-wrap:wrap; gap:12px; margin-top:14px; color:#b8cecc; font-size:.72rem; }
.map-legend span { display:flex; align-items:center; gap:6px; }
.map-legend i { width:10px; height:10px; border-radius:50%; }
.fallback-cases { margin-top:32px; }
.fallback-cases summary { cursor:pointer; font-weight:700; }
.case-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:18px; }
.case-card { border:1px solid rgba(255,255,255,.15); border-radius:18px; padding:18px; background:rgba(255,255,255,.04); }
.case-card h3 { font-size:1.35rem; }
.case-card p { color:#bed1cf; font-size:.82rem; }
.figa-section { background:#fff; }
.figa-layout { display:grid; grid-template-columns:minmax(0,.84fr) minmax(460px,1.16fr); gap:48px; align-items:center; }
.figa-copy { max-width:520px; }
.machine { position:relative; border-radius:32px; background:linear-gradient(#dce9e4 0 18%,#795b48 18% 36%,#ded9d0 36% 100%); min-height:620px; overflow:hidden; box-shadow:var(--shadow); border:1px solid #c5d5d1; }
.machine-sky { position:absolute; inset:0 0 auto 0; height:18%; background:linear-gradient(#cfe8eb,#eaf5f2); }
.trough { position:absolute; left:10%; right:10%; top:18%; height:116px; border-radius:52% 48% 42% 43% / 28% 30% 65% 62%; background:linear-gradient(180deg,#bb8b5c,#7e4d2f); box-shadow:inset 0 -18px 30px rgba(56,27,14,.25),0 18px 28px rgba(55,32,20,.25); }
.trough::before { content:""; position:absolute; inset:14px 8%; border-radius:50%; background:#5b3927; box-shadow:inset 0 14px 28px rgba(0,0,0,.42); }
.nozzles { position:absolute; top:110px; left:17%; right:17%; display:flex; justify-content:space-between; }
.nozzle { width:11px; height:70px; background:#6b452e; border-radius:4px; position:relative; }
.drop { position:absolute; left:4px; top:66px; width:4px; height:11px; border-radius:50%; background:#59cfd2; opacity:0; animation:drop 1.1s linear infinite; }
.nozzle:nth-child(2) .drop{animation-delay:.2s}.nozzle:nth-child(3) .drop{animation-delay:.4s}.nozzle:nth-child(4) .drop{animation-delay:.6s}.nozzle:nth-child(5) .drop{animation-delay:.8s}.nozzle:nth-child(6) .drop{animation-delay:1s}.nozzle:nth-child(7) .drop{animation-delay:.35s}.nozzle:nth-child(8) .drop{animation-delay:.75s}
.machine.is-running .drop { opacity:1; }
@keyframes drop { from{transform:translateY(0) scaleY(.7);opacity:0} 20%{opacity:1} to{transform:translateY(270px) scaleY(1.2);opacity:0} }
.salt-face { position:absolute; left:0; right:0; bottom:0; height:64%; background:linear-gradient(155deg,#f8f5ee,#d3cec4 62%,#b9b3a8); clip-path:polygon(0 19%,8% 15%,19% 20%,31% 12%,43% 19%,55% 10%,69% 18%,82% 11%,100% 18%,100% 100%,0 100%); }
.holes { position:absolute; left:17%; right:17%; top:48%; display:flex; justify-content:space-between; }
.hole { width:18px; height:12px; border-radius:50%; background:#9b948a; transform:scale(.25); transition:transform .45s, box-shadow .45s; box-shadow:inset 0 3px 5px rgba(0,0,0,.32); }
.machine[data-stage="1"] .hole{transform:scale(.55)}
.machine[data-stage="2"] .hole{transform:scale(.82);box-shadow:inset 0 8px 10px rgba(0,0,0,.4)}
.machine[data-stage="3"] .hole,.machine[data-stage="4"] .hole{transform:scale(1.12);box-shadow:inset 0 12px 14px rgba(0,0,0,.46)}
.crack { position:absolute; top:55%; height:3px; background:#777066; transform-origin:left center; transform:scaleX(0); transition:transform .55s; }
.crack.c1{left:18%;width:26%;transform:rotate(7deg) scaleX(0)}.crack.c2{left:40%;width:31%;transform:rotate(-5deg) scaleX(0)}.crack.c3{left:59%;width:24%;transform:rotate(9deg) scaleX(0)}.crack.c4{left:30%;top:62%;width:46%;transform:rotate(2deg) scaleX(0)}
.machine[data-stage="3"] .crack,.machine[data-stage="4"] .crack{transform:rotate(var(--r,0deg)) scaleX(1)}
.crack.c1{--r:7deg}.crack.c2{--r:-5deg}.crack.c3{--r:9deg}.crack.c4{--r:2deg}
.wedges { position:absolute; left:22%; right:20%; top:54%; display:flex; justify-content:space-between; opacity:0; transform:translateY(-16px); transition:.45s; }
.machine[data-stage="4"] .wedges { opacity:1; transform:translateY(0); }
.wedge { width:16px; height:94px; background:linear-gradient(90deg,#a9784e,#6b442d); clip-path:polygon(50% 0,100% 100%,0 100%); transform:rotate(180deg); }
.machine-panel { position:absolute; left:22px; right:22px; bottom:20px; border-radius:20px; padding:18px; background:rgba(6,31,43,.92); color:white; backdrop-filter:blur(10px); }
.machine-panel label { display:flex; justify-content:space-between; gap:12px; font-family:var(--mono); font-size:.72rem; color:#b5d4d2; }
.machine-panel input { width:100%; accent-color:var(--pink); margin:12px 0; }
.machine-state { min-height:52px; color:#d8e7e6; font-size:.82rem; }
.machine-actions { display:flex; gap:8px; margin-top:12px; }
.machine-actions button { border:1px solid rgba(255,255,255,.2); background:transparent; color:white; border-radius:999px; padding:7px 12px; cursor:pointer; font-size:.78rem; }
.machine-actions button:first-child { background:white; color:var(--ink); }
.figa-fact { margin-top:28px; padding:18px; background:var(--mist); border-radius:18px; font-size:.86rem; color:var(--ink-2); }
.figa-memory { margin-top:22px; font-family:var(--display); font-size:2rem; line-height:1.08; color:var(--pink); }
.timeline-section { background:linear-gradient(180deg,#eff7f5,#dcece8); }
.timeline { margin-top:50px; position:relative; padding:30px 0 10px; overflow-x:auto; }
.timeline-track { min-width:1400px; height:360px; position:relative; }
.timeline-line { position:absolute; left:6.5%; right:6.5%; top:160px; height:4px; background:linear-gradient(90deg,var(--ember),var(--gold),var(--cyan),var(--pink)); border-radius:4px; }
.timeline-item { position:absolute; top:0; width:150px; transform:translateX(-50%); }
.timeline-item:nth-child(even){top:188px}
.timeline-dot { position:absolute; left:50%; top:150px; width:22px; height:22px; margin-left:-11px; border-radius:50%; background:white; border:5px solid var(--pink); box-shadow:0 0 0 7px rgba(230,95,145,.14); }
.timeline-item:nth-child(even) .timeline-dot{top:-39px}
.timeline-card { min-height:135px; border-radius:16px; padding:14px; background:white; border:1px solid #b8d0cc; box-shadow:0 8px 20px rgba(8,39,51,.08); }
.timeline-card time { font-family:var(--mono); font-size:.67rem; color:var(--pink); }
.timeline-card strong { display:block; margin:6px 0; font-family:var(--display); font-size:1.25rem; line-height:1; }
.timeline-card span { display:block; font-size:.72rem; line-height:1.38; color:var(--muted); }
.power-section { background:white; }
.power-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:44px; }
.power-card { min-height:235px; border-radius:24px; border:1px solid #c2d6d2; padding:26px; position:relative; overflow:hidden; background:linear-gradient(145deg,#fff,#edf6f4); }
.power-card::before { content:attr(data-index); position:absolute; right:15px; top:-16px; font-family:var(--mono); font-size:5.8rem; color:rgba(8,39,51,.05); }
.power-card h3 { font-size:1.8rem; }
.power-card p { color:var(--muted); font-size:.9rem; }
.power-line { margin:52px 0 0; padding:38px; border-radius:28px; background:var(--brine); color:white; font-family:var(--display); font-size:clamp(2rem,5vw,4rem); line-height:1; }
.salary-note { margin-top:22px; border-radius:28px; padding:34px; background:linear-gradient(120deg,#f8f1df,#fff7fa); border:1px solid #e1d4bd; display:grid; grid-template-columns:minmax(220px,.72fr) minmax(0,1.28fr); gap:32px; }
.salary-word { align-self:center; font:700 clamp(1.55rem,3.3vw,3.2rem)/1 var(--display); color:var(--pink); letter-spacing:-.03em; }
.salary-word span { display:block; margin-bottom:14px; font:700 .68rem/1.3 var(--mono); letter-spacing:.12em; color:var(--brine); }
.salary-copy h3 { font-size:clamp(1.7rem,3vw,2.5rem); }
.salary-copy p { color:var(--muted); }
.ending { position:relative; padding:130px 0; background:radial-gradient(circle at 50% 0,rgba(65,199,199,.18),transparent 34%),var(--brine-deep); color:white; text-align:center; }
.ending .section-inner { max-width:900px; }
.ending h2 { margin-left:auto; margin-right:auto; }
.ending p { color:#cadfdd; font-size:1.08rem; }
.sources-section { background:#f5f8f7; }
.status-box { max-width:920px; border-left:6px solid var(--gold); padding:24px 26px; background:white; box-shadow:0 10px 30px rgba(8,39,51,.06); margin:32px 0 42px; }
.source-list { display:grid; gap:12px; }
.source-item { display:grid; grid-template-columns:minmax(240px,1.1fr) minmax(240px,1.4fr) 100px; gap:18px; align-items:start; border-top:1px solid #c7d8d5; padding:18px 0; }
.source-item h3 { font-family:var(--body); font-size:.95rem; line-height:1.35; margin:0; }
.source-item h3 a { text-decoration-thickness:1px; }
.source-item p { margin:0; font-size:.8rem; color:var(--muted); }
.source-item .source-type { font-family:var(--mono); font-size:.68rem; color:var(--pink); }
.method-box { margin-top:48px; max-width:820px; }
.site-footer { background:#061f2b; color:#a9c4c2; }
.footer-inner { width:var(--shell); min-height:100px; margin:auto; display:flex; gap:24px; align-items:center; justify-content:space-between; }
.footer-inner a { color:white; }
.static-top { min-width:44px; min-height:44px; display:inline-grid; place-items:center; border:1px solid rgba(255,255,255,.2); border-radius:50%; text-decoration:none; }
.floating-top { position:fixed; right:max(18px,env(safe-area-inset-right)); bottom:max(18px,env(safe-area-inset-bottom)); z-index:40; width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(6,31,43,.94); color:white; display:grid; place-items:center; text-decoration:none; opacity:0; pointer-events:none; transition:opacity .18s; box-shadow:0 10px 24px rgba(0,0,0,.22); }
.floating-top.is-visible { opacity:1; pointer-events:auto; }
.tooltip { position:fixed; z-index:100; max-width:280px; padding:9px 11px; border-radius:10px; background:#061f2b; color:white; font-size:.75rem; line-height:1.35; box-shadow:0 12px 30px rgba(0,0,0,.25); pointer-events:none; }
[data-tip] { text-decoration:underline dotted; text-underline-offset:3px; cursor:help; }
@media (max-width:980px) {
  :root{--shell:min(100% - 30px,820px)}
  .hero-inner,.electric-layout,.appetite-layout,.terrain-layout,.map-shell,.figa-layout,.surplus-inner,.salary-note{grid-template-columns:1fr}
  .hero-inner{padding-top:60px}.crystal-stage{min-height:460px}.hero-stats{bottom:10px}
  .ion-stage,.terrain-result{position:relative;top:auto}.map-stage{min-height:0}.figa-copy{max-width:none}
  .case-grid,.power-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px) {
  body{font-size:16px}.header-inner{gap:8px}.brand{display:none}.section-nav a{padding:7px 8px}.language-link{margin-left:auto}
  .section{padding:78px 0}.hero-inner{min-height:auto;padding:60px 0 42px;gap:26px}h1{font-size:clamp(4.2rem,22vw,6.2rem);line-height:.8}.hero-deck{font-size:1.7rem}.hero-lede{font-size:.98rem}
  .crystal-stage{min-height:390px}.crystal{inset:0 2% 18%}.hero-stats{grid-template-columns:1fr;position:absolute;bottom:0}.hero-stat{padding:10px 12px;display:grid;grid-template-columns:90px 1fr;align-items:center}.hero-stat span{margin:0}.hero-stat strong{font-size:1.25rem}
  .terrain-buttons{grid-template-columns:1fr}.terrain-button{min-height:112px}.terrain-result{min-height:360px;padding:26px}
  .map-stage{min-height:0;aspect-ratio:360/145}.map-detail{min-height:390px}.case-grid,.power-grid{grid-template-columns:1fr}.surplus-inner{gap:28px}.surplus-grains{min-height:120px}.salary-note{padding:26px}
  .electric-facts{grid-template-columns:1fr}.ion-stage{min-height:570px}.ion-cloud{grid-template-columns:repeat(4,1fr)}.ion-cloud i{width:40px;height:40px}.ion-pump{right:4%;width:118px}.ion-channel{left:20%}.ion-controls{grid-template-columns:1fr}.appetite-cards{gap:16px}.figa-layout{gap:30px}.machine{min-height:560px}.figa-memory{font-size:1.65rem}.power-line{padding:28px}
  .source-item{grid-template-columns:1fr;gap:6px}.footer-inner{padding:24px 0;align-items:flex-start}.footer-inner>div{display:grid;gap:8px}
}
@media (prefers-reduced-motion: reduce) {
  html{scroll-behavior:auto}.crystal,.crystal-lines path,.drop,.impulse-track i,.pump-arrow{animation:none!important}.terrain-button,.map-marker,.hole,.crack,.wedges,.floating-top,.ion-cloud i,.ion-channel,.ion-pump{transition:none!important}
}
@media print {
  .site-header,.floating-top,.terrain-buttons,.filter-row,.machine-actions{display:none!important}.hero{min-height:auto}.hero-inner{min-height:auto}.section{padding:40px 0}.map-shell,.figa-layout,.electric-layout,.appetite-layout{grid-template-columns:1fr}.floating-top{display:none}
}