@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Manrope:wght@400;500;600&display=swap');
:root{--ink:#111511;--paper:#f2f0e8;--acid:#c8ff28;--lilac:#c6b6ef;--pad:clamp(24px,5.2vw,84px)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink);color:var(--paper);font-family:"DM Sans",Arial,sans-serif;overflow:hidden}a{color:inherit;text-decoration:none}button{font:inherit}.skip{position:fixed;left:8px;top:8px;z-index:100;background:var(--acid);color:var(--ink);padding:10px 16px;transform:translateY(-150%)}.skip:focus{transform:none}.examples-header{height:84px;position:fixed;z-index:30;inset:0 0 auto;display:flex;align-items:center;gap:32px;padding:0 var(--pad);background:rgba(12,15,12,.86);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.15)}.brand{display:inline-flex;align-items:center;gap:14px;font:600 clamp(18px,2vw,26px) Manrope;white-space:nowrap}.dot{color:var(--acid)}.mark{position:relative;width:29px;height:31px}.mark i{position:absolute;width:21px;height:27px;border:1px solid}.mark i:nth-child(1){left:0;top:4px}.mark i:nth-child(2){left:4px;top:2px}.mark i:nth-child(3){left:8px}.progress{margin-left:auto;display:flex;align-items:center;gap:16px;font-size:11px}.progress>i{display:block;width:170px;height:2px;background:#4d544e}.progress b{display:block;height:100%;background:var(--acid);transform:scaleX(.142);transform-origin:left;transition:.35s}.exit{font-size:12px;margin-left:25px}.example-track{display:flex;width:100%;height:100vh;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none}.example-track::-webkit-scrollbar{display:none}.panel{position:relative;flex:0 0 100vw;height:100vh;scroll-snap-align:start;display:flex;align-items:center;padding:125px var(--pad) 75px;overflow:hidden}.panel>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,8,5,.95),rgba(5,8,5,.72) 43%,rgba(5,8,5,.08) 75%),linear-gradient(0deg,rgba(5,8,5,.5),transparent)}.veil.right-copy{background:linear-gradient(270deg,rgba(5,8,5,.96),rgba(5,8,5,.74) 43%,rgba(5,8,5,.08) 75%)}.veil.left-copy{background:linear-gradient(90deg,rgba(5,8,5,.95),rgba(5,8,5,.72) 43%,rgba(5,8,5,.08) 75%)}.panel-copy{position:relative;z-index:2;max-width:820px}.align-right{margin-left:auto}.align-left{margin-right:auto}.eyebrow{font-size:10px;letter-spacing:.16em}.panel h1,.panel h2{font:400 clamp(58px,6.8vw,108px)/.91 Manrope;letter-spacing:-.067em;margin:25px 0}.panel h1 em,.panel h2 em{font-family:Georgia;color:var(--acid);font-weight:400}.panel-copy>p:not(.eyebrow){font-size:clamp(17px,1.55vw,23px);line-height:1.55;max-width:690px}.panel small{display:block;margin-top:30px;font-size:9px;letter-spacing:.12em;color:#c5cac2}.round-button{width:72px;height:72px;border-radius:50%;background:transparent;color:white;border:1px solid #737b74;font-size:27px;margin-top:20px}.direction{position:absolute;z-index:2;right:8vw;display:grid;color:var(--acid)}.direction span{writing-mode:vertical-rl;font-size:9px;letter-spacing:.2em}.direction b{font-size:120px;line-height:.55;opacity:.2}.direction b:nth-of-type(2){opacity:.55}.direction b:nth-of-type(3){opacity:1}.system-line{display:flex;align-items:center;gap:12px;margin-top:34px;flex-wrap:wrap}.system-line span{border:1px solid #838c84;padding:10px 12px;font-size:9px;letter-spacing:.1em;background:rgba(11,15,12,.65)}.system-line i{font-style:normal;color:var(--acid)}.metric{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:14px;margin-top:32px;background:rgba(12,16,13,.75);padding:18px;max-width:650px}.metric span{font-size:9px;color:var(--acid)}.metric b{font-weight:500}.metric i{font-style:normal;color:var(--acid);font-size:24px}.review-cards{display:flex;gap:10px;margin-top:32px}.review-cards span{background:rgba(15,19,16,.78);padding:16px 20px;font-size:10px}.review-cards b{display:block;font:500 35px Manrope;color:var(--acid)}.final-panel{background:linear-gradient(135deg,#171d18,#0a0d0a);display:grid;grid-template-columns:.7fr 1.3fr;gap:7vw}.final-visual{position:relative;display:grid;place-items:center;min-height:60vh}.final-visual span{font:400 clamp(180px,25vw,420px)/1 Georgia;color:var(--acid)}.final-visual i{position:absolute;width:70%;aspect-ratio:1;border:1px solid #4b544c;border-radius:50%}.final-visual i:nth-of-type(2){width:50%}.final-visual i:nth-of-type(3){width:30%}.actions{display:flex;align-items:center;gap:25px;flex-wrap:wrap;margin-top:30px}.button{background:var(--acid);color:var(--ink);padding:17px 21px;font-weight:600}.text-link{border-bottom:1px solid;padding:12px 0}.controls{position:fixed;z-index:35;right:var(--pad);bottom:22px;display:flex;align-items:center;gap:12px;background:rgba(15,19,16,.83);backdrop-filter:blur(12px);padding:7px}.controls button{width:42px;height:42px;background:transparent;border:1px solid #566057;color:white}.controls span{font-size:8px;letter-spacing:.14em}
@media(max-width:800px){body{overflow:auto}.examples-header{height:70px;padding:0 20px}.examples-header .mark{display:none}.brand{font-size:17px}.progress{display:none}.exit{margin-left:auto}.example-track{display:block;height:auto;overflow:visible;scroll-snap-type:none}.panel{width:100%;height:auto;min-height:100svh;padding:105px 22px 70px}.panel>img{position:absolute}.veil,.veil.right-copy,.veil.left-copy{background:linear-gradient(0deg,rgba(5,8,5,.96),rgba(5,8,5,.35) 78%)}.panel{align-items:flex-end}.panel h1,.panel h2{font-size:53px}.align-right,.align-left{margin:0}.direction{display:none}.final-panel{display:grid;grid-template-columns:1fr;align-items:center}.final-visual{min-height:32vh}.controls{display:none}.system-line{gap:7px}.metric{grid-template-columns:1fr 1fr}.review-cards{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}