:root{--ink:#111315;--paper:#f5f3ee;--green:#345f43;--green-dark:#173f2c;--gold:#c8942b;--muted:#777;--line:#d8d4cb}
*{box-sizing:border-box}html,body{margin:0;background:#ece9e1;color:var(--ink);font-family:Arial,Helvetica,sans-serif}.page-shell{max-width:1560px;margin:auto;padding:28px}.topline{display:flex;align-items:center;gap:16px;margin:0 0 18px}.topline img{width:54px;height:54px;object-fit:contain}.topline span{display:block;font-size:11px;letter-spacing:.18em;color:var(--gold);font-weight:700}.topline strong{display:block;font-size:18px;margin-top:3px}.signature-card{display:grid;grid-template-columns:minmax(0,2fr) minmax(310px,1fr);background:#f8f7f3;border:1px solid #d8d4cb;box-shadow:0 24px 70px rgba(0,0,0,.12);overflow:hidden;min-height:610px}.sequence{position:relative;background:linear-gradient(180deg,#fbfaf7,#f3f1eb);overflow:hidden;min-height:610px;border-right:1px solid #d8d4cb}.stage-label{position:absolute;z-index:5;left:4.2%;top:4.5%;font-size:12px;letter-spacing:.16em;color:var(--green);font-weight:800}.stage-copy{position:absolute;z-index:5;left:4.2%;top:8.5%;font-size:16px;color:#555;max-width:620px}.sequence svg{position:absolute;inset:0;width:100%;height:100%}.grid line{stroke:#dcd8cf;stroke-width:1;opacity:.5}.layer{opacity:0;transition:opacity .9s ease,transform 1s ease;transform-origin:center}.layer.active{opacity:1}.layer.exiting{opacity:0;transform:scale(.985)}.bottle-glass{fill:url(#glassBody);stroke:url(#glassEdge);stroke-width:2.2}.bottle-neck{fill:url(#glassBody);stroke:#6d7774;stroke-width:1.5}.bottle-cap{fill:url(#cap);stroke:#060707;stroke-width:1.4}.cap-ridge{stroke:#5d6462;stroke-width:1;opacity:.55}.bottle-fuel{fill:url(#fuel)}.fuel-overlay{fill:url(#fuelHighlight)}.fuel-meniscus{fill:none;stroke:#f8d775;stroke-width:2;opacity:.7}.bottle-shine{fill:#fff;opacity:.25}.bottle-side-shine{fill:#fff;opacity:.12}.bottle-base{fill:none;stroke:#f8faf8;stroke-width:3;opacity:.48}.bottle-check{fill:var(--gold);font-size:16px;font-weight:700}.bottle-label{fill:#222;font-size:12px}.bottle-sub{fill:#6d6d6d;font-size:10px;letter-spacing:.03em}.sample-tag{fill:#fff;stroke:#d7d2c8;stroke-width:1}.sample-letter{fill:var(--green-dark);font-size:13px;font-weight:800}.trace-axis{stroke:#999;stroke-width:1}.trace-line{fill:none;stroke:url(#goldLine);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;filter:url(#softGlow)}.trace-title{fill:#262b28;font-size:14px;font-weight:700}.trace-sub{fill:#787878;font-size:10px}.trace-line.draw{stroke-dasharray:1500;stroke-dashoffset:1500;animation:draw 2.1s ease forwards}.propeller-shaft{stroke:#626866;stroke-width:12;stroke-linecap:round}.propeller-blade{fill:#707674;stroke:#353937;stroke-width:2}.propeller-hub{fill:#2b2f2d;stroke:#8e9491;stroke-width:3}.propeller-group{transform-box:fill-box;transform-origin:center}.propeller-group.spinning{animation:spin 1.1s linear infinite}.rpm-label{fill:#444;font-size:12px;font-weight:700}.advance-track{stroke:#d7d2c8;stroke-width:7;stroke-linecap:round}.advance-fill{stroke:var(--green);stroke-width:7;stroke-linecap:round}.advance-label{fill:#666;font-size:10px}.same-rpm{fill:var(--gold);font-size:16px;font-weight:800;letter-spacing:.08em}.final-layer{transform:scale(.97)}.final-layer.active{transform:scale(1)}.final-small{fill:#2b332f;font-size:24px;font-weight:800;letter-spacing:.06em}.final-main{fill:var(--green-dark);font-size:36px;font-weight:800}.final-rule{stroke:var(--gold);stroke-width:4}.final-tag{fill:#444;font-size:18px}.timeline{position:absolute;z-index:6;left:4%;right:4%;bottom:4.5%;display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid #cfcac0}.timeline span{padding-top:11px;text-align:center;font-size:10px;letter-spacing:.08em;color:#999;position:relative}.timeline span:before{content:"";width:8px;height:8px;border-radius:50%;background:#c9c4ba;position:absolute;top:-5px;left:50%;transform:translateX(-50%)}.timeline span.active{color:var(--green);font-weight:800}.timeline span.active:before{background:var(--gold);box-shadow:0 0 0 5px rgba(200,148,43,.15)}.controls{position:absolute;z-index:8;right:2.2%;top:3%;display:flex;gap:8px}.controls button{border:1px solid #bdb7ab;background:rgba(255,255,255,.84);padding:7px 10px;font-weight:700;cursor:pointer}.explanation{padding:42px 38px 34px;background:linear-gradient(145deg,#f7f5ef,#ece8df);display:flex;flex-direction:column}.eyebrow{font-size:11px;letter-spacing:.15em;color:var(--gold);font-weight:800;margin-bottom:14px}.explanation h1{font-size:34px;line-height:1.04;margin:0 0 20px;color:var(--green-dark)}.explanation>p{font-size:16px;line-height:1.55;color:#555;margin:0 0 25px}.principle{display:grid;grid-template-columns:34px 1fr;gap:12px;padding:14px 0;border-top:1px solid #d3cec3}.principle>span{font-size:11px;color:var(--gold);font-weight:800;padding-top:3px}.principle strong{display:block;font-size:14px;color:#252a27}.principle small{display:block;font-size:12px;color:#70706d;line-height:1.4;margin-top:4px}.explanation blockquote{margin:auto 0 18px;padding:20px 0 0;border-top:1px solid #bbb5aa;font-size:18px;line-height:1.35;color:#303632}.explanation blockquote b{color:var(--green-dark)}.brand-line{display:flex;align-items:center;gap:10px;font-size:11px;color:#686863}.brand-line img{width:32px;height:32px;object-fit:contain}.note{font-size:12px;color:#777;margin:12px 2px 0}@keyframes draw{to{stroke-dashoffset:0}}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:1050px){.signature-card{grid-template-columns:1fr}.sequence{border-right:0;border-bottom:1px solid #d8d4cb;min-height:590px}.explanation{padding:30px}.explanation h1{font-size:29px}}
@media(max-width:700px){.page-shell{padding:10px}.sequence{min-height:540px}.stage-copy{font-size:13px;right:20px}.final-main{font-size:30px}.timeline{left:3%;right:3%}.timeline span{font-size:8px}.topline strong{font-size:15px}.explanation{padding:26px 22px}}