:root {
  --ink: #17232d;
  --paper: #f7f1e5;
  --cream: #fffaf0;
  --coral: #e9543d;
  --coral-dark: #b9342d;
  --blue: #275a98;
  --green: #71866a;
  --gold: #e9b64d;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(143, 119, 78, .045) 0 1px, transparent 1.4px),
    radial-gradient(circle at 70% 60%, rgba(143, 119, 78, .04) 0 1px, transparent 1.5px);
  background-size: 18px 20px, 24px 21px;
}
button, input, select { font: inherit; }
a { color: inherit; text-decoration: none; }

.nav {
  height: 90px; padding: 0 clamp(24px, 5vw, 78px); display: flex; align-items: center;
  justify-content: space-between; border-bottom: 1px solid rgba(23,35,45,.09);
  background: rgba(247,241,229,.88); backdrop-filter: blur(14px); position: sticky; top: 0; z-index: 20;
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand span:last-child { display: flex; flex-direction: column; }
.brand b { font-size: 21px; letter-spacing: .08em; }
.brand small { font-size: 11px; color: #7a746a; letter-spacing: .15em; margin-top: 2px; }
.brand-mark { width: 42px; height: 46px; position: relative; }
.brand-mark i { position: absolute; left: 19px; top: 0; width: 7px; height: 47px; border-radius: 5px; background: #d7a961; transform: rotate(42deg); box-shadow: inset 0 0 0 1px #715430; }
.brand-mark i:after { content:""; position:absolute; width: 11px; height: 11px; background:var(--coral); border-radius:50%; top:-3px; left:-2px; box-shadow:inset 0 0 0 2px #6c241d; }
.brand-mark i:last-child { transform: rotate(-42deg); }
.brand-mark i:last-child:after { background:var(--blue); }
.nav nav { display:flex; gap:clamp(20px,3vw,48px); font-size:14px; font-weight:700; color:#5f5b54; }
.nav nav a:hover { color:var(--coral); }

.hero { min-height:690px; padding:70px clamp(24px,5vw,78px); display:grid; grid-template-columns:minmax(430px,.9fr) 1.2fr; gap:52px; align-items:center; overflow:hidden; }
.eyebrow, .section-heading>span { color:var(--coral); font-weight:800; letter-spacing:.16em; font-size:12px; }
.hero h1 { font-size:clamp(54px,6.2vw,94px); line-height:.98; letter-spacing:-.06em; margin:18px 0 24px; font-weight:950; }
.hero h1 em { color:var(--coral); font-style:normal; }
.lead { max-width:610px; color:#575852; line-height:1.8; font-size:15px; }
.problem-card { max-width:660px; position:relative; border-left:4px solid var(--coral); background:rgba(255,250,240,.75); padding:16px 20px 15px 24px; box-shadow:0 8px 22px rgba(76,58,36,.06); }
.problem-card>span { position:absolute; left:-4px; top:-26px; color:var(--coral); font-size:12px; font-weight:900; letter-spacing:.18em; }
.problem-card p { margin:0; color:#3f413e; font-size:15px; line-height:1.9; font-weight:600; }
.problem-card i { font-family:Georgia,serif; font-size:1.08em; }
.origin-note { display:flex; align-items:center; gap:12px; width:fit-content; margin:0 0 40px; padding:7px 10px 7px 8px; border:1px solid #d9cbb6; border-radius:8px; background:rgba(255,250,240,.65); }
.origin-note b { padding:5px 8px; border-radius:5px; background:var(--ink); color:white; font:700 10px Georgia,serif; letter-spacing:.08em; }
.origin-note span { color:#777066; font-size:11px; }
.formula-card { display:flex; align-items:center; gap:32px; border-top:2px solid var(--green); border-bottom:1px solid #cfc5b2; width:fit-content; margin:28px 0; padding:12px 4px; }
.formula-card>span { font-size:13px; font-weight:800; }
.formula { font-family:Georgia,serif; font-size:25px; font-style:italic; display:flex; align-items:center; gap:8px; }
.fraction { display:inline-flex; flex-direction:column; vertical-align:middle; text-align:center; font-family:Georgia,serif; font-style:italic; line-height:1.15; }
.fraction b { padding:3px 9px; font-weight:500; }
.fraction b:first-child { border-bottom:1.5px solid currentColor; }
.primary-button, .run-button { display:inline-flex; align-items:center; justify-content:center; gap:36px; background:var(--coral); color:white; border:0; border-radius:999px; padding:16px 28px; font-weight:900; box-shadow:0 7px 0 #b83c31, 0 14px 24px rgba(185,60,49,.18); transition:.2s; }
.primary-button:hover,.run-button:hover { transform:translateY(-2px); box-shadow:0 9px 0 #b83c31,0 16px 28px rgba(185,60,49,.22); }

.hero-visual { min-height:540px; position:relative; }
.hand-note { position:absolute; left:6%; top:0; transform:rotate(-4deg); font-family:KaiTi,serif; color:#767069; line-height:1.7; }
.hero-visual>.matchbox.red { position:absolute; left:7%; top:130px; transform:rotate(-5deg); z-index:2; }
.hero-visual>.matchbox.blue { position:absolute; right:0; top:115px; transform:rotate(4deg); }
#hero-red { position:absolute; left:7%; top:130px; transform:rotate(-5deg); z-index:2; }
#hero-blue { position:absolute; right:0; top:115px; transform:rotate(4deg); }
.matchbox { width:320px; max-width:100%; min-width:0; height:145px; position:relative; display:flex; align-items:center; }
.tray {
  height:112px; flex:1; border:8px solid #c9b394; border-top-color:#e5d4bc;
  background:
    linear-gradient(105deg,rgba(255,255,255,.08),transparent 35%),
    repeating-linear-gradient(92deg,#8c6747 0 2px,#9e7753 2px 5px,#866143 5px 6px);
  border-radius:7px; box-shadow:inset 0 8px 12px rgba(49,29,13,.32),0 13px 16px rgba(59,38,20,.18);
  overflow:hidden; position:relative;
}
.tray:before { content:""; position:absolute; inset:5px; border:1px solid rgba(255,255,255,.12); border-radius:3px; pointer-events:none; }
.sleeve { width:195px; height:142px; margin-left:-110px; border-radius:6px; color:white; display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:0 10px 15px rgba(32,32,25,.2); position:relative; z-index:2; }
.red .sleeve { background:linear-gradient(135deg,#ec674e,#b8322b); }
.blue .sleeve { background:linear-gradient(135deg,#3774b7,#214b84); }
.sleeve:after { content:""; position:absolute; bottom:10px; left:0; right:0; height:18px; background:repeating-linear-gradient(0deg,rgba(15,20,20,.72) 0 2px,rgba(255,255,255,.06) 2px 3px); }
.sleeve>b { font-size:28px; }
.sleeve>span { font:italic 24px Georgia,serif; margin-top:6px; }
.sleeve small { font:12px "PingFang SC",sans-serif; opacity:.8; }
.matches { height:100%; display:flex; gap:2px; align-items:center; padding:11px 7px 7px; position:relative; z-index:1; }
.matches i,.loose-matches span {
  display:block; width:7px; height:84px; flex:0 0 7px; border-radius:3px;
  background:
    linear-gradient(90deg,rgba(104,64,24,.3),transparent 25% 68%,rgba(91,54,21,.32)),
    repeating-linear-gradient(88deg,#d6a65e 0 1px,#f3d18f 1px 3px,#c78f48 3px 4px);
  position:relative; box-shadow:1px 3px 3px rgba(31,20,9,.28);
}
.matches i:before,.loose-matches span:before {
  content:""; position:absolute; width:12px; height:16px; border-radius:55% 45% 48% 52%;
  top:-6px; left:-2.5px;
  background:
    radial-gradient(circle at 35% 28%,rgba(255,183,148,.55) 0 9%,transparent 11%),
    radial-gradient(circle at 35% 30%,#d7654f,#942c26 70%,#5e1e19);
  box-shadow:inset -2px -3px 4px rgba(42,7,4,.38),0 2px 2px rgba(45,22,10,.3);
}
.matches i:after,.loose-matches span:after {
  content:""; position:absolute; left:2px; top:15px; bottom:6px; width:1px;
  background:rgba(255,244,201,.45);
}
.blue .matches i:before {
  background:
    radial-gradient(circle at 35% 28%,rgba(182,218,255,.65) 0 8%,transparent 10%),
    radial-gradient(circle at 38% 32%,#4e86c6,#214b84 72%,#112c52);
}
.matches small { color:white; font-size:22px; margin:auto; font-weight:900; }
.loose-matches { position:absolute; left:36%; top:350px; display:flex; gap:20px; }
.loose-matches span { height:105px; width:9px; flex-basis:9px; }
.paper-result { position:absolute; right:2%; bottom:0; width:260px; padding:25px; background:#fffaf0; transform:rotate(2deg); box-shadow:0 15px 30px rgba(76,58,36,.14); border:1px solid #e0d4c1; }
.paper-result:before { content:""; position:absolute; top:-10px; left:80px; width:100px; height:25px; background:rgba(119,143,108,.28); transform:rotate(-3deg); }
.paper-result span,.paper-result b { display:block; }
.paper-result span { font-size:12px; color:#777; }
.paper-result b { margin:8px 0 16px; font-size:19px; }
.mini-formula { font:italic 18px Georgia,serif; border-top:1px dashed #b6ad9f; padding-top:14px; }
.paper-result strong { display:block; color:var(--green); font:700 30px Georgia,serif; margin-top:12px; }

.section { padding:100px clamp(24px,6vw,96px); }
.section-heading { max-width:760px; margin-bottom:46px; }
.section-heading h2,.note-section h2 { font-size:clamp(34px,4vw,56px); letter-spacing:-.04em; margin:10px 0 14px; }
.section-heading p { color:#66645e; line-height:1.8; }
.centered { text-align:center; margin:0 auto 50px; }
.experiment { background:#fffaf0; border-top:1px solid #e3d9c8; }
.experiment-grid { display:grid; grid-template-columns:380px 1fr; gap:28px; max-width:1280px; margin:auto; align-items:stretch; }
.control-card,.stage,.calc-card,.chart-card { background:white; border:1px solid #dfd5c4; border-radius:22px; box-shadow:0 18px 50px rgba(76,58,36,.08); }
.control-card { padding:28px; }
.panel-label { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:28px; padding-bottom:15px; border-bottom:1px solid #e3dacb; }
.panel-label span { font-weight:900; }
.panel-label small { color:#a39b8e; font:700 9px Georgia,serif; letter-spacing:.16em; }
.slider-row { margin-bottom:28px; }
.slider-row label { display:flex; justify-content:space-between; font-size:13px; font-weight:700; }
.slider-row label b { color:var(--coral); font-size:17px; }
input[type=range] { width:100%; accent-color:var(--coral); margin:18px 0 2px; }
.ticks { display:flex; justify-content:space-between; color:#9b958b; font-size:10px; }
.run-button { width:100%; margin-top:8px; cursor:pointer; box-shadow:0 5px 0 #b83c31; }
.run-button:disabled { background:#9b958b; box-shadow:none; cursor:wait; transform:none; }
.text-button { display:block; margin:19px auto 0; border:0; background:none; color:#777; cursor:pointer; }
.speed-control { display:flex; align-items:center; justify-content:space-between; margin:4px 0 20px; padding:12px 0; border-top:1px solid #eee6da; }
.speed-control label { font-size:12px; font-weight:800; }
.speed-control select { border:1px solid #d8cebe; border-radius:8px; padding:7px 26px 7px 10px; background:#fff; font-size:12px; }
.secondary-actions { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:18px; }
.secondary-actions button { border:1px solid #d7cebf; border-radius:9px; background:#fff; color:#575852; padding:9px 4px; font-size:12px; font-weight:800; cursor:pointer; }
.secondary-actions button:hover:not(:disabled) { border-color:var(--blue); color:var(--blue); }
.secondary-actions button:disabled { opacity:.38; cursor:not-allowed; }
.rule-card { margin-top:24px; padding:16px; border-radius:12px; background:#f3f5f2; border-left:3px solid var(--green); }
.rule-card b { font-size:12px; }
.rule-card p { margin:7px 0 0; color:#696d68; font-size:11px; line-height:1.7; }
.stage { padding:26px 30px 30px; min-width:0; min-height:720px; display:flex; flex-direction:column; overflow:hidden; background:linear-gradient(#fff,#f9f3e8); }
.stage-header { display:flex; justify-content:space-between; align-items:center; padding-bottom:16px; border-bottom:1px solid #e5dccf; }
.stage-title { display:flex; flex-direction:column; gap:3px; }
.stage-title span { font-size:14px; font-weight:900; }
.stage-title small { color:#9a9388; font:700 9px Georgia,serif; letter-spacing:.12em; }
.stage-badges { display:flex; align-items:center; justify-content:flex-end; gap:7px; }
.target-badge { padding:6px 10px; border-radius:99px; background:#e5edf7; color:var(--blue); font-size:10px; font-weight:900; white-space:nowrap; }
.phase-badge { padding:6px 11px; border-radius:99px; background:#ece8df; color:#79746b; font-size:10px; font-weight:900; }
.phase-badge.running { background:#e9f4e9; color:#527054; }
.phase-badge.running:before { content:""; display:inline-block; width:6px; height:6px; margin-right:6px; border-radius:50%; background:#56a260; animation:pulse 1s infinite; }
.phase-badge.paused { background:#fff3d9; color:#9b741b; }
.phase-badge.finished { background:#fde4de; color:#b64032; }
.metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:16px 0 6px; }
.metrics>div { border:1px solid #e4dccf; border-radius:10px; background:rgba(255,255,255,.75); padding:10px 12px; display:grid; grid-template-columns:1fr auto; align-items:end; }
.metrics small { grid-column:1/-1; color:#8b8479; font-size:9px; }
.metrics b { margin-top:3px; font:700 19px Georgia,serif; color:var(--ink); }
.metrics span { color:#aaa196; font-size:9px; padding-bottom:3px; }
.stage-scene {
  margin-top:10px; padding:16px 18px 18px; border:1px solid #ded2bf; border-radius:18px;
  width:100%; max-width:100%; min-width:0; overflow:hidden;
  background:
    linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.12)),
    repeating-linear-gradient(0deg,#d8ba83 0 2px,#dfc28d 2px 5px,#d4b37b 5px 7px);
  box-shadow:inset 0 1px rgba(255,255,255,.8),inset 0 -12px 30px rgba(94,60,24,.08);
}
.stage-boxes { display:flex; justify-content:center; align-items:flex-start; gap:16px; }
.box-station { min-width:0; width:250px; max-width:100%; display:flex; flex-direction:column; align-items:center; }
.box-ledger {
  margin-top:0; padding:5px 10px; border:1px solid rgba(75,53,28,.15); border-radius:99px;
  background:rgba(255,250,240,.82); color:#665743; font-size:10px; font-weight:800;
}
.matchbox.compact { width:250px; max-width:100%; height:130px; }
.compact .sleeve { width:140px; height:115px; margin-left:-85px; }
.compact .sleeve>b { font-size:20px; }
.compact .tray { height:90px; }
.compact .matches i { height:65px; }
.coin { width:75px; text-align:center; color:#716a5f; }
.coin span { width:52px; height:52px; border-radius:50%; border:2px solid var(--gold); background:#ffe4a5; display:grid; place-items:center; margin:auto; font:italic 20px Georgia,serif; box-shadow:0 5px 0 #c89738; }
.coin small { font-size:10px; display:block; margin-top:12px; }
.coin.picked-red span { background:#f5cbc3; border-color:var(--coral); color:var(--coral-dark); box-shadow:0 5px 0 #c75a4a; animation:coinPick .3s; }
.coin.picked-blue span { background:#d9e8f8; border-color:var(--blue); color:var(--blue); box-shadow:0 5px 0 #214b84; animation:coinPick .3s; }
.drawn-board {
  margin-top:14px; padding:13px 14px 12px; border:1px solid rgba(78,54,27,.2); border-radius:13px;
  background:rgba(255,250,240,.88); box-shadow:inset 0 2px 9px rgba(85,54,22,.08);
}
.drawn-board-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding-bottom:10px; border-bottom:1px dashed #cbbda8; }
.drawn-board-head>div { display:flex; flex-direction:column; gap:2px; }
.drawn-board-head b { font-size:12px; }
.drawn-board-head small { color:#8d8375; font-size:9px; }
.drawn-board-head strong { color:var(--coral-dark); font:700 16px Georgia,serif; white-space:nowrap; }
.drawn-matches {
  min-height:112px; padding:14px 8px 10px; display:flex; align-content:flex-start; align-items:flex-start;
  flex-wrap:wrap; gap:8px 10px; position:relative;
}
.drawn-empty { margin:auto; align-self:center; color:#a59b8d; font-size:10px; }
.drawn-match {
  --tilt:0deg; display:block; width:8px; height:76px; flex:0 0 8px; border-radius:3px;
  transform:rotate(var(--tilt)); transform-origin:center bottom; position:relative;
  background:
    linear-gradient(90deg,rgba(104,64,24,.28),transparent 28% 66%,rgba(91,54,21,.3)),
    repeating-linear-gradient(88deg,#d6a65e 0 1px,#f4d595 1px 3px,#c78f48 3px 4px);
  box-shadow:1px 3px 3px rgba(49,28,10,.22); animation:placeMatch .34s cubic-bezier(.2,.8,.25,1) both;
}
.drawn-match:before {
  content:""; position:absolute; width:13px; height:17px; left:-2.5px; top:-7px;
  border-radius:55% 45% 48% 52%;
  background:
    radial-gradient(circle at 35% 28%,rgba(255,190,158,.55) 0 8%,transparent 10%),
    radial-gradient(circle at 38% 32%,#db6a52,#942c26 70%,#5d1b17);
  box-shadow:inset -2px -3px 4px rgba(42,7,4,.38),0 2px 2px rgba(45,22,10,.3);
}
.drawn-match.from-blue:before {
  background:
    radial-gradient(circle at 35% 28%,rgba(182,218,255,.65) 0 8%,transparent 10%),
    radial-gradient(circle at 38% 32%,#4e86c6,#214b84 72%,#112c52);
}
.drawn-match:after { content:""; position:absolute; left:2px; top:14px; bottom:5px; width:1px; background:rgba(255,244,201,.48); }
.drawn-match small {
  position:absolute; z-index:2; left:50%; bottom:9px; transform:translateX(-50%) rotate(calc(-1 * var(--tilt)));
  color:#5c3c20; font:700 7px Georgia,serif;
}
.conservation {
  display:grid; grid-template-columns:auto auto 1fr; align-items:center; gap:10px;
  padding:8px 10px; border-radius:9px; background:#f0eee5; color:#66635d;
}
.conservation span { color:var(--green); font-size:9px; font-weight:900; letter-spacing:.08em; }
.conservation b { color:var(--ink); font:700 15px Georgia,serif; }
.conservation small { text-align:right; font-size:9px; }
.status { margin:18px auto 14px; background:#f3eee5; border-radius:99px; padding:10px 18px; font-size:12px; text-align:center; }
.status-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--gold); margin-right:8px; animation:pulse 1.2s infinite; }
.status.done { color:var(--coral-dark); font-weight:800; }
.status.done .status-dot { background:var(--coral); animation:none; }
.timeline { min-height:28px; display:flex; justify-content:center; gap:7px; }
.timeline i { width:12px; height:25px; border-radius:6px; background:#d5b376; position:relative; animation:pop .25s; }
.timeline i:before { content:""; position:absolute; width:13px; height:8px; top:-2px; left:-1px; border-radius:50%; }
.timeline i.red:before { background:var(--coral); }
.timeline i.blue:before { background:var(--blue); }
.timeline i.discover { background:transparent; border:2px solid var(--coral); color:var(--coral); font-style:normal; font-weight:900; text-align:center; height:23px; }
.timeline i.discover:before { display:none; }
.event-log { border:1px solid #ddd4c6; border-radius:12px; overflow:hidden; background:rgba(255,255,255,.75); }
.log-head,.log-row { display:grid; grid-template-columns:54px 90px 1fr 120px; align-items:center; min-height:34px; padding:0 12px; gap:8px; }
.log-head { background:var(--ink); color:#dbe0e1; font-size:9px; font-weight:800; letter-spacing:.05em; }
.log-row { border-top:1px solid #ece5db; font-size:10px; color:#5f5d58; animation:rowIn .25s; }
.log-row span:nth-child(2) { display:flex; align-items:center; gap:6px; font-weight:800; }
.log-row.discover { background:#fff0ec; color:#a53e32; font-weight:800; }
.red-dot,.blue-dot { width:7px; height:7px; border-radius:50%; background:var(--coral); }
.blue-dot { background:var(--blue); }
.log-empty { height:82px; display:grid; place-items:center; color:#aaa298; font-size:10px; }

.solution { background:var(--paper); }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; max-width:1200px; margin:auto; }
.steps article { background:rgba(255,250,240,.75); border:1px solid #dcd1bf; border-radius:20px; padding:30px; position:relative; }
.step-number { position:absolute; top:-18px; left:24px; width:42px; height:42px; border-radius:50%; background:var(--green); color:white; font:700 24px Georgia,serif; display:grid; place-items:center; }
.steps article:nth-child(2) .step-number { background:var(--gold); }
.steps article:nth-child(3) .step-number { background:var(--blue); }
.step-icon { height:100px; display:grid; place-items:center; font:italic 32px Georgia,serif; color:var(--coral); }
.step-icon.comb { font-size:64px; color:var(--gold); }
.step-icon.symmetry { color:var(--blue); }
.steps h3 { font-size:21px; margin:8px 0; }
.steps p { font-size:14px; color:#69665f; line-height:1.7; min-height:72px; }
.answer { border-top:1px solid #ddd2c1; padding-top:16px; font-family:Georgia,serif; text-align:center; }
.answer strong { color:var(--coral); font-size:20px; }
.final-formula { max-width:700px; margin:44px auto 0; background:var(--ink); color:white; border-radius:20px; padding:27px 34px; display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; box-shadow:0 16px 0 #d8ccb7; }
.final-formula>div { display:flex; flex-direction:column; }
.final-formula>div span { font:italic 24px Georgia,serif; }
.fraction.large { font-size:26px; }
.final-formula p { flex-basis:100%; text-align:center; margin:5px 0 0; color:#bfc5c4; font-size:12px; }

.verify { background:#fffaf0; border-top:1px solid #e3d9c8; }
.verify-grid { display:grid; grid-template-columns:330px 1fr; gap:28px; max-width:1200px; margin:auto; }
.calc-card { padding:32px; transform:rotate(-1deg); }
.calc-card>p:first-child { font-weight:800; border-bottom:2px solid var(--green); padding-bottom:10px; }
.calc-line { font:italic 22px Georgia,serif; margin:18px 0; display:flex; align-items:center; }
.simplified { font-size:18px; }
.percent { display:block; font:700 40px Georgia,serif; color:var(--green); margin-top:26px; }
.muted { color:#8b867c; font-size:12px; }
.chart-card { padding:28px; min-width:0; }
.chart-head { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.chart-head b,.chart-head small { display:block; }
.chart-head small { color:#888177; font-size:10px; margin-top:5px; }
.trial-control { display:flex; gap:7px; }
.trial-control select,.trial-control button { border:1px solid #d6ccbb; border-radius:9px; background:white; padding:8px 10px; font-size:12px; }
.trial-control button { background:var(--blue); color:white; border-color:var(--blue); cursor:pointer; font-weight:800; }
.bars { height:245px; display:flex; gap:8px; align-items:end; margin-top:34px; border-bottom:1px solid #bbb1a0; overflow-x:auto; padding-top:24px; }
.bars button { border:0; background:none; min-width:34px; flex:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; cursor:pointer; color:#79746c; position:relative; }
.bar { width:75%; min-height:2px; background:#e7a493; display:block; position:relative; border-radius:5px 5px 0 0; transition:.35s; }
.bars button.active .bar { background:var(--coral); box-shadow:0 0 0 3px rgba(233,84,61,.16); }
.bars button>b { font-size:11px; margin:8px 0; }
.bar-value { font-size:9px; margin-bottom:5px; }
.bar i { position:absolute; width:10px; height:10px; background:var(--blue); border:2px solid white; border-radius:50%; left:50%; transform:translate(-50%,50%); box-shadow:0 1px 4px #555; }
.chart-note { font-size:10px; color:#8b867d; text-align:center; margin:12px 0 0; }

.comparison-section { padding:95px clamp(24px,7vw,110px); background:var(--ink); color:white; }
.comparison-section .section-heading p { color:#aeb7ba; }
.comparison-grid { max-width:1100px; margin:auto; display:grid; grid-template-columns:1fr 70px 1fr; align-items:stretch; }
.comparison-grid article { position:relative; border:1px solid rgba(255,255,255,.15); border-radius:18px; padding:30px; background:rgba(255,255,255,.055); }
.comparison-grid .standard-case { border-color:rgba(233,84,61,.6); }
.comparison-grid .alternate-case { border-color:rgba(233,182,77,.55); }
.case-label { display:inline-block; padding:5px 9px; border-radius:99px; background:var(--coral); font-size:10px; font-weight:900; }
.alternate-case .case-label { background:var(--gold); color:var(--ink); }
.comparison-grid h3 { margin:18px 0 24px; font-size:19px; }
.case-formula { min-height:78px; display:flex; align-items:center; font:italic 23px Georgia,serif; }
.comparison-grid article p { color:#acb5b7; font-size:12px; line-height:1.8; }
.comparison-grid article>strong { display:block; margin-top:18px; padding-top:15px; border-top:1px solid rgba(255,255,255,.12); color:#fff; font:700 15px Georgia,serif; }
.versus { display:grid; place-items:center; font:italic 32px Georgia,serif; color:#768085; }
.relation-card { max-width:800px; margin:34px auto 0; padding:18px 24px; border-radius:14px; background:#fff; color:var(--ink); display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap; }
.relation-card>span { color:var(--coral); font-size:10px; font-weight:900; letter-spacing:.12em; }
.relation-card>div { font:italic 18px Georgia,serif; display:flex; align-items:center; gap:6px; }
.relation-card>small { color:#817b72; }
footer { padding:35px clamp(24px,6vw,96px); background:var(--ink); color:white; display:flex; justify-content:space-between; font-size:12px; }
footer span { color:#9ba4a9; }

@keyframes pulse { 50% { transform:scale(1.5); opacity:.45; } }
@keyframes pop { from { transform:translateY(-20px) rotate(8deg); opacity:0; } }
@keyframes coinPick { from { transform:scale(.75) rotate(-12deg); opacity:.5; } }
@keyframes rowIn { from { transform:translateY(-7px); opacity:0; } }
@keyframes placeMatch {
  from { transform:translateY(-34px) rotate(calc(var(--tilt) - 10deg)); opacity:0; }
  to { transform:translateY(0) rotate(var(--tilt)); opacity:1; }
}

@media(max-width:1000px) {
  .hero { grid-template-columns:1fr; padding-top:55px; }
  .hero-visual { min-height:520px; }
  .experiment-grid,.verify-grid { grid-template-columns:1fr; }
  .control-card { display:grid; grid-template-columns:1fr 1fr; gap:15px 28px; }
  .run-button { align-self:end; }
}
@media(max-width:720px) {
  .nav { height:72px; padding:0 18px; }
  .nav nav { display:none; }
  .brand b { font-size:17px; }
  .hero { padding:44px 20px 55px; min-height:auto; display:block; }
  .hero h1 { font-size:52px; }
  .hero-visual { min-height:0; margin-top:40px; display:flex; flex-direction:column; align-items:center; gap:18px; overflow:hidden; }
  .hero-visual>.matchbox.red,.hero-visual>.matchbox.blue {
    position:relative; inset:auto; width:min(320px,100%); transform:none; flex:0 0 auto;
  }
  .hero-visual>.matchbox.red { transform:rotate(-2deg); }
  .hero-visual>.matchbox.blue { transform:rotate(2deg); }
  .hero-visual>.matchbox .sleeve { width:61%; margin-left:-34%; }
  #hero-red,#hero-blue { position:relative; inset:auto; width:min(320px,100%); transform:none; flex:0 0 auto; }
  #hero-red { transform:rotate(-2deg); }
  #hero-blue { transform:rotate(2deg); }
  #hero-red .matchbox,#hero-blue .matchbox { width:100%; }
  #hero-red .sleeve,#hero-blue .sleeve { width:61%; margin-left:-34%; }
  .hand-note { position:relative; left:auto; top:auto; align-self:flex-start; }
  .loose-matches { display:none; }
  .paper-result { position:relative; right:auto; bottom:auto; width:min(260px,100%); margin-top:18px; }
  .section { padding:70px 20px; }
  .section-heading h2,.note-section h2 { font-size:36px; }
  .control-card { display:block; }
  .stage { padding:28px 12px; }
  .stage-scene { padding:12px 6px; }
  .stage-header { align-items:flex-start; gap:10px; }
  .stage-badges { flex-direction:column; align-items:flex-end; }
  .stage-boxes { width:100%; flex-direction:column; align-items:center; gap:10px; transform:none; margin:0; }
  .box-station { width:min(250px,100%); }
  .matchbox.compact { width:min(250px,100%); }
  .compact .sleeve { width:56%; margin-left:-34%; }
  .coin { width:100%; display:flex; align-items:center; justify-content:center; gap:10px; }
  .coin span { margin:0; }
  .coin small { margin:0; }
  .drawn-board { margin-top:6px; }
  .drawn-matches { min-height:160px; gap:9px; }
  .conservation { grid-template-columns:auto 1fr; }
  .conservation small { grid-column:1/-1; text-align:left; }
  .log-head,.log-row { grid-template-columns:42px 72px 1fr 85px; padding:0 8px; gap:4px; }
  .steps { grid-template-columns:1fr; gap:38px; }
  .final-formula { padding:22px 16px; }
  .chart-head { align-items:flex-start; flex-direction:column; }
  .bars { gap:3px; }
  .bar-value { display:none; }
  .comparison-grid { grid-template-columns:1fr; gap:18px; }
  .versus { min-height:30px; }
  .relation-card { align-items:flex-start; flex-direction:column; }
  footer { flex-direction:column; gap:9px; }
}

@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  * { animation:none!important; transition:none!important; }
}