method.css

.mt-hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding:140px 56px 96px;overflow:hidden}.mt-hero-content{position:relative;z-index:2;display:grid;gap:26px}.mt-h1{font-family:var(--font-display);font-weight:800;font-size:clamp(64px,12.5vw,208px);line-height:.95;letter-spacing:-.035em;margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .22em}.mt-h1 .mt-360{color:transparent;-webkit-text-stroke:2.5px var(--text)}@supports not (-webkit-text-stroke: 1px red){.mt-h1 .mt-360{color:var(--text)}}.mt-sub{color:var(--muted);font-size:clamp(17px,1.6vw,21px);line-height:1.6;max-width:560px;margin:0;text-wrap:pretty}.mt-scroll{position:absolute;right:56px;bottom:96px;z-index:2;display:grid;gap:10px;justify-items:center;color:var(--dim);font-size:11px;letter-spacing:.2em;text-transform:uppercase}.mt-story{padding:120px 56px;position:relative;z-index:2}.mt-story-intro{font-size:clamp(19px,1.75vw,23px);line-height:1.7;color:var(--text);opacity:.92;max-width:56ch;margin:0 0 72px;text-wrap:pretty}.mt-lesson{display:grid;grid-template-columns:120px 1fr 1.1fr;gap:40px;align-items:start;padding:44px 0;border-top:1px solid var(--border)}.mt-lesson-n{color:var(--accent);font-size:13px;padding-top:10px}.mt-lesson-t{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,3vw,44px);letter-spacing:-.02em;line-height:1.1;margin:0;text-wrap:balance}.mt-lesson-b{margin:0;color:var(--muted);font-size:clamp(15px,1.4vw,18px);line-height:1.7;max-width:46ch;text-wrap:pretty;padding-top:6px}.mt-bridge{border-top:1px solid var(--border);margin:0;padding:88px 0 24px;font-family:var(--font-display);font-weight:800;font-size:clamp(38px,5.6vw,92px);letter-spacing:-.03em;line-height:1.02}.mt-track{position:relative;height:480vh}.mt-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:40px;padding:0 56px;border-top:1px solid var(--border)}.mt-big{font-family:var(--font-display);font-weight:800;font-size:clamp(240px,34vw,560px);line-height:1;letter-spacing:-.04em;display:flex;align-items:baseline;justify-content:center;animation:mtLetterIn .45s var(--ease-out-soft)}.mt-big .brk{font-size:.62em;transform:translateY(-.08em)}@keyframes mtLetterIn{0%{opacity:0;transform:translateY(36px)}to{opacity:1;transform:translateY(0)}}.mt-step{display:grid;gap:20px;max-width:480px;animation:mtLetterIn .45s var(--ease-out-soft)}.mt-step-n{color:var(--dim);letter-spacing:.18em;font-size:12px}.mt-step-word{font-family:var(--font-display);font-weight:700;font-size:clamp(30px,3.4vw,50px);letter-spacing:-.02em;margin:0}.mt-step-text{margin:0;color:var(--text);opacity:.9;font-size:clamp(16px,1.5vw,19px);line-height:1.7;text-wrap:pretty}.mt-step-why{display:grid;gap:8px;padding-top:6px}.mt-step-why .mono{color:var(--dim);font-size:11px;letter-spacing:.16em}.mt-step-why p{margin:0;color:var(--accent);font-family:var(--font-display);font-weight:600;font-size:clamp(17px,1.6vw,21px);line-height:1.45}.mt-rail{position:absolute;left:56px;right:56px;bottom:34px;display:flex;align-items:center;gap:22px;color:var(--dim);font-size:12px;letter-spacing:.14em}.mt-rail b{font-weight:500}.mt-rail b[data-on=true]{color:var(--accent)}.mt-rail-bar{flex:1;height:1px;background:var(--border);position:relative}.mt-rail-bar i{position:absolute;left:0;top:-.5px;height:2px;background:var(--accent);display:block}.mt-static-row{display:grid;grid-template-columns:220px 1fr;gap:40px;align-items:start;padding:56px;border-top:1px solid var(--border)}.mt-static-letter{font-family:var(--font-display);font-weight:800;font-size:clamp(90px,10vw,160px);line-height:1}.mt-ring{padding:120px 56px 130px;border-top:1px solid var(--border);position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}.mt-ring-line{font-family:var(--font-display);font-weight:700;font-size:clamp(30px,3.8vw,56px);letter-spacing:-.02em;line-height:1.08;margin:24px 0 28px;max-width:16ch}.mt-ring-body{margin:0;color:var(--muted);font-size:clamp(15px,1.4vw,18px);line-height:1.75;max-width:46ch;text-wrap:pretty}.mt-ring-stage{position:relative;aspect-ratio:1;max-width:560px;justify-self:center;width:100%}.mt-ring-svg{width:100%;height:100%;display:block}@media(prefers-reduced-motion:no-preference){.mt-ring-svg{animation:mtSpin 46s linear infinite}}@keyframes mtSpin{to{transform:rotate(360deg)}}.mt-ring-svg text{font-family:var(--font-mono);font-size:19px;letter-spacing:6px;fill:var(--dim)}.mt-ring-center{position:absolute;inset:0;display:grid;place-items:center}.mt-ring-brain{position:relative;width:76%;height:76%}.mt-ring-brain .hero-3d{-webkit-mask-image:none;mask-image:none}@media(prefers-reduced-motion:no-preference){.mt-r{opacity:0;transform:translateY(24px);transition:opacity var(--t-slow) var(--ease-out-soft),transform var(--t-slow) var(--ease-out-soft)}.mt-r.on{opacity:1;transform:translateY(0)}}@media(max-width:1024px){.mt-lesson{grid-template-columns:80px 1fr}.mt-lesson-b{grid-column:2}.mt-ring{grid-template-columns:1fr;gap:40px}.mt-ring-stage{max-width:440px}}@media(max-width:860px){.mt-hero{padding:120px 20px 80px}.mt-scroll{display:none}.mt-story{padding:80px 20px}.mt-lesson{grid-template-columns:1fr;gap:10px;padding:30px 0}.mt-sticky{grid-template-columns:1fr;grid-template-rows:1fr auto;padding:24px 20px 90px;gap:0}.mt-big{font-size:clamp(160px,44vw,300px);align-self:center}.mt-step{max-width:none;align-self:start}.mt-rail{left:20px;right:20px;bottom:26px}.mt-static-row{grid-template-columns:1fr;padding:40px 20px;gap:16px}.mt-ring{padding:80px 20px 96px}}