/* The method becomes a physical instrument: one key, a route, real milestones. */
.method-enhanced{--method-progress:0;--method-turn:0deg;position:relative;isolation:isolate;background:var(--paper,#f5f1ea);overflow:visible!important}
.method-enhanced:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 14% 42%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 43%)}
.method-enhanced>.section-heading{margin-bottom:clamp(48px,6vw,100px)}
.method-shell{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:clamp(50px,7vw,140px);align-items:start;position:relative}
.method-console{position:sticky;top:120px;min-width:0;padding:26px 0 0;border-top:1px solid color-mix(in srgb,var(--ink) 20%,transparent);align-self:start}
.method-console-head,.method-console-status,.method-console-foot,.method-route{font-family:'Geist Mono',monospace}
.method-console-head{display:flex;justify-content:space-between;gap:14px;font-size:10px;letter-spacing:.08em;color:color-mix(in srgb,var(--ink) 65%,transparent)}
.method-total{color:var(--accent)}
.method-keyspace{position:relative;min-height:310px;height:min(30vw,390px);display:grid;place-items:center;perspective:1000px;isolation:isolate}
.method-key-orbit{position:absolute;width:90%;max-width:390px;aspect-ratio:1;left:50%;top:50%;transform:translate(-50%,-50%) rotateX(62deg) rotateZ(-25deg);pointer-events:none}
.method-key-orbit>i{position:absolute;inset:0;border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);border-radius:50%}
.method-key-orbit>i:nth-child(2){inset:14%;border-style:dashed;border-color:color-mix(in srgb,var(--ink) 18%,transparent);transform:rotate(var(--method-turn))}
.method-key-orbit>i:nth-child(3){inset:-14%;border-color:color-mix(in srgb,var(--accent) 11%,transparent)}
.method-orbit-dot{position:absolute;inset:0;transform:rotate(var(--method-turn))}
.method-orbit-dot:before,.method-orbit-dot:after{content:"";position:absolute;top:49%;left:-5px;width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 22px color-mix(in srgb,var(--accent) 30%,transparent)}
.method-orbit-dot:after{left:auto;right:-3px;width:5px;height:5px;background:var(--ink);box-shadow:none}
.method-key-floor{position:absolute;top:64%;width:220px;height:95px;background:color-mix(in srgb,var(--accent-deep,#832c0a) 30%,transparent);filter:blur(25px);transform:rotate(-15deg);border-radius:50%;opacity:.4;transition:opacity .3s}
.method-key{--key-x:0deg;--key-y:0deg;position:relative;width:230px;height:220px;padding:0;border:0;border-radius:29px;color:var(--paper);cursor:pointer;appearance:none;background:linear-gradient(120deg,color-mix(in srgb,var(--accent-light) 30%,#242322),color-mix(in srgb,var(--page-dark,#231a14) 90%,black) 64%);box-shadow:1px 4px 0 color-mix(in srgb,var(--accent) 44%,#51483e),3px 9px 0 #282420,4px 14px 0 #211b17,6px 20px 0 #17130f,8px 25px 0 #14110e,13px 35px 30px #14110e25,25px 55px 55px #14110e1a;transform:rotateX(calc(26deg + var(--key-x))) rotateY(calc(-15deg + var(--key-y))) rotateZ(-10deg);transform-style:preserve-3d;transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .35s;isolation:isolate}
.method-key:before{content:"";position:absolute;inset:2px;border-radius:27px;background:linear-gradient(145deg,#fff5,transparent 24%,transparent 70%,#fff1);z-index:-1}
.method-key-top{position:absolute;inset:8px 8px 10px;padding:19px 17px;border-radius:22px;display:flex;flex-direction:column;align-items:start;justify-content:space-between;text-align:left;overflow:hidden;background:radial-gradient(ellipse at 5% 0%,color-mix(in srgb,var(--accent-light) 40%,transparent),transparent 58%),linear-gradient(135deg,color-mix(in srgb,var(--page-dark,#231a14) 80%,#675141),var(--page-dark,#231a14));box-shadow:inset 0 1px 1px #ffffff50,inset 1px 0 1px #ffffff26,inset 0 -1px 3px #0007}
.method-key-top:after{content:"";position:absolute;inset:0;background:linear-gradient(125deg,transparent 15%,#fff0 38%,#fff1 49%,transparent 60%);transform:translateX(-85%);transition:transform .9s ease;pointer-events:none}
.method-key:hover .method-key-top:after{transform:translateX(85%)}
.method-key-caption{font-family:'Geist Mono',monospace;font-size:8px;letter-spacing:.07em;color:color-mix(in srgb,var(--paper) 58%,transparent);max-width:125px;line-height:1.4}
.method-key-arrow{position:absolute;top:15px;right:16px;font-size:24px;font-weight:300;color:var(--accent-light)}
.method-key-number{display:block;font-family:'Geist',sans-serif;font-size:124px;font-weight:400;letter-spacing:-.09em;line-height:.92;text-shadow:0 2px 1px #0006;color:var(--paper);font-variant-numeric:tabular-nums}
.method-key-next{font-family:'Geist Mono',monospace;font-size:8px;letter-spacing:.12em;color:var(--accent-light)}
.method-key:hover{transform:translateY(-6px) rotateX(calc(23deg + var(--key-x))) rotateY(calc(-13deg + var(--key-y))) rotateZ(-8deg)}
.method-key:active,.method-key.is-pressed{transform:translate(5px,15px) rotateX(22deg) rotateY(-13deg) rotateZ(-9deg);box-shadow:1px 4px 0 #282420,2px 8px 0 #17130f,5px 16px 25px #14110e30}
.method-key:focus-visible{outline:2px solid var(--accent);outline-offset:14px}
.method-console-status{display:flex;align-items:center;gap:9px;font-size:10px;line-height:1.45;padding:0 0 20px;border-bottom:1px solid color-mix(in srgb,var(--ink) 18%,transparent);color:var(--ink)}
.method-status-dot{width:5px;height:5px;flex:0 0 5px;background:var(--accent);border-radius:50%;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 8%,transparent)}
.method-current-count{margin-left:auto;white-space:nowrap;color:var(--accent)}
.method-route{position:relative;display:flex;justify-content:space-between;gap:10px;margin-top:22px}
.method-route:before,.method-route:after{content:"";position:absolute;left:0;right:0;top:29px;height:1px;background:color-mix(in srgb,var(--ink) 15%,transparent);pointer-events:none}
.method-route:after{background:var(--accent);transform:scaleX(var(--method-progress));transform-origin:left}
.method-route-stop{position:relative;z-index:1;display:flex;align-items:center;flex-direction:column;gap:12px;min-width:34px;min-height:52px;padding:0;background:transparent;border:0;font:10px 'Geist Mono',monospace;color:color-mix(in srgb,var(--ink) 45%,transparent);cursor:pointer;transition:color .25s}
.method-route-stop:first-child{align-items:start}.method-route-stop:last-child{align-items:end}
.method-route-stop i{display:block;width:7px;height:7px;border-radius:50%;margin-top:2px;background:var(--paper);border:1px solid color-mix(in srgb,var(--ink) 30%,transparent);transition:box-shadow .3s,background .3s,border-color .3s}
.method-route-stop[aria-current=step],.method-route-stop.is-complete,.method-route-stop:hover{color:var(--accent)}
.method-route-stop[aria-current=step] i{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 11%,transparent)}
.method-route-stop.is-complete i{background:var(--accent);border-color:var(--accent)}
.method-route-stop:focus-visible{outline:1px solid var(--accent);outline-offset:5px;border-radius:3px}
.method-console-foot{display:flex;justify-content:space-between;gap:10px;font-size:9px;line-height:1.6;color:color-mix(in srgb,var(--ink) 50%,transparent);padding-top:10px}
.method-console-foot b{font-size:15px;font-weight:400;color:var(--accent);margin-left:5px}
.method-enhanced .method-path{position:relative;max-width:none;margin:0;padding:0;display:flex;flex-direction:column;gap:28px}
.method-enhanced .method-step{--step-progress:0;display:flex;flex-direction:column;justify-content:space-between;position:relative;min-height:clamp(340px,46vh,470px);padding:38px 36px 26px;border:1px solid color-mix(in srgb,var(--ink) 14%,transparent);border-radius:5px;background:color-mix(in srgb,var(--page-tint,var(--paper)) 55%,var(--paper));gap:27px;isolation:isolate;overflow:hidden;transform:none!important;opacity:1!important;transition:background .55s,border-color .55s,box-shadow .55s;scroll-margin-top:180px}
.method-step:before{content:attr(data-method-index);position:absolute;bottom:-15px;right:18px;font-size:clamp(150px,16vw,245px);line-height:1;letter-spacing:-.09em;font-weight:500;color:color-mix(in srgb,var(--accent) 5%,transparent);z-index:-1;pointer-events:none;transition:color .55s}
.method-step:after{content:"";position:absolute;left:-1px;top:0;bottom:0;width:3px;background:var(--accent);transform:scaleY(var(--step-progress));transform-origin:top;transition:opacity .3s;opacity:0}
.method-enhanced .method-step.is-current{background:var(--page-dark,#211911);color:var(--paper);border-color:color-mix(in srgb,var(--accent) 60%,var(--page-dark,#211911));box-shadow:0 25px 55px color-mix(in srgb,var(--accent-deep) 9%,transparent)}
.method-step.is-current:before{color:color-mix(in srgb,var(--accent-light) 10%,transparent)}
.method-step.is-current:after{opacity:1}
.method-enhanced .method-step .timeline-date{display:flex;flex-direction:row;align-items:center;gap:18px;font-size:10px;letter-spacing:.03em;color:color-mix(in srgb,var(--ink) 65%,transparent)}
.method-enhanced .method-step .timeline-date span{display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);border-radius:50%;width:32px;height:32px;font-size:10px;color:var(--accent);flex:none}
.method-enhanced .method-step .timeline-date b{font-weight:400;line-height:1.7}
.method-enhanced .method-step.is-current .timeline-date{color:color-mix(in srgb,var(--paper) 60%,transparent)}
.method-enhanced .method-step.is-current .timeline-date span{color:var(--accent-light);border-color:color-mix(in srgb,var(--accent-light) 45%,transparent)}
.method-enhanced .method-step h3{font-size:clamp(29px,2.7vw,44px);line-height:1.06;font-weight:500;letter-spacing:-.045em;margin:0 0 22px;max-width:13em;color:var(--ink);transition:color .55s}
.method-enhanced .method-step p{font-size:clamp(14px,1.15vw,17px);line-height:1.75;margin:0;color:color-mix(in srgb,var(--ink) 69%,transparent);transition:color .55s}
.method-enhanced .method-step.is-current h3{color:var(--paper)}
.method-enhanced .method-step.is-current p{color:color-mix(in srgb,var(--paper) 72%,transparent)}
.method-step-signal{display:flex;align-items:center;gap:4px;height:22px;opacity:.28;transition:opacity .4s;margin-top:5px}
.method-step-signal i{display:block;width:2px;height:3px;background:var(--accent);transition:height .6s cubic-bezier(.2,.7,.2,1),background .4s;transform-origin:center}
.method-step-signal i:nth-child(3n){--wave:18px}.method-step-signal i:nth-child(3n + 1){--wave:8px}.method-step-signal i:nth-child(3n + 2){--wave:12px}
.method-step.is-current .method-step-signal{opacity:1}
.method-step.is-current .method-step-signal i{height:var(--wave);background:var(--accent-light)}
.method-step.is-complete .method-step-signal i{height:5px}
.method-step:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
@media(min-width:1600px){.method-console{top:140px}.method-keyspace{height:390px}.method-enhanced .method-step{padding:46px 48px 32px;min-height:440px}}
@media(max-width:1000px) and (min-width:761px){.method-shell{gap:40px;grid-template-columns:.9fr 1.1fr}.method-key{width:200px;height:195px}.method-key-number{font-size:109px}.method-key-caption{font-size:7px}.method-keyspace{min-height:295px}.method-enhanced .method-step{padding:28px 25px;min-height:355px}.method-console-head{font-size:8px}.method-console-foot{font-size:8px;flex-direction:column;gap:0}.method-current-count{display:none}.method-enhanced .method-step h3{font-size:31px}}
@media(max-height:720px) and (min-width:761px){.method-console{top:95px;padding-top:18px}.method-keyspace{height:270px;min-height:270px}.method-key{width:195px;height:185px}.method-key-number{font-size:99px}.method-key-caption{font-size:7px}.method-console-status{padding-bottom:13px}.method-route{margin-top:15px}.method-console-foot{padding-top:0}}
@media(max-width:760px){
 .method-shell{display:block}.method-enhanced>.section-heading{margin-bottom:32px}
 .method-console{display:grid;grid-template-columns:105px 1fr;column-gap:14px;position:sticky;top:82px;z-index:5;padding:14px 15px 12px 2px;margin:0 -2px 25px;border:1px solid color-mix(in srgb,var(--accent) 25%,var(--paper));border-radius:5px;background:color-mix(in srgb,var(--paper) 95%,var(--page-tint,var(--paper)));box-shadow:0 14px 30px color-mix(in srgb,var(--ink) 9%,transparent)}
 .method-console-head{grid-column:2;font-size:7px;gap:5px;align-items:center}.method-total{display:none}
 .method-keyspace{grid-column:1;grid-row:1/4;height:105px;min-height:0}
 .method-key{width:76px;height:78px;border-radius:12px;box-shadow:1px 3px 0 #494139,2px 6px 0 #211b17,3px 9px 0 #17130f,6px 16px 16px #14110e25;transform:rotateX(20deg) rotateY(-13deg) rotateZ(-9deg)}
 .method-key:before{inset:1px;border-radius:11px}.method-key-top{inset:3px 3px 4px;padding:11px 8px 8px;border-radius:9px}
 .method-key-caption{display:none}.method-key-arrow{top:3px;right:6px;font-size:15px}.method-key-number{font-size:47px}.method-key-next{font-size:4px;letter-spacing:.05em}
 .method-key:hover{transform:translateY(-2px) rotateX(20deg) rotateY(-13deg) rotateZ(-9deg)}
 .method-key:active,.method-key.is-pressed{transform:translate(2px,6px) rotateX(20deg) rotateY(-13deg) rotateZ(-9deg);box-shadow:1px 3px 0 #211b17,2px 6px 0 #17130f,3px 9px 12px #14110e25}
 .method-key-floor{width:60px;height:20px;filter:blur(10px)}.method-key-orbit{display:none}
 .method-console-status{grid-column:2;align-items:center;gap:6px;margin:8px 0 0;padding:0;border:0;font-size:8px;min-height:22px}.method-current-label{max-width:190px}.method-current-count{display:none}.method-status-dot{width:4px;height:4px;flex-basis:4px}
 .method-route{grid-column:2;gap:7px;margin-top:12px}.method-route-stop{min-height:31px;min-width:25px;gap:6px;font-size:8px}.method-route:before,.method-route:after{top:18px}.method-route-stop i{width:5px;height:5px;margin-top:0}.method-route-stop[aria-current=step] i{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 11%,transparent)}
 .method-console-foot{display:none}
 .method-enhanced .method-path{gap:20px}
 .method-enhanced .method-step{min-height:335px;padding:26px 25px 20px;gap:27px;scroll-margin-top:235px}
 .method-enhanced .method-step h3{font-size:32px;max-width:12em;margin-bottom:20px}.method-enhanced .method-step p{font-size:14px;line-height:1.75}
 .method-enhanced .method-step .timeline-date{font-size:8px;gap:12px}.method-enhanced .method-step .timeline-date span{width:28px;height:28px;font-size:9px}
 .method-step:before{font-size:175px;right:12px;bottom:-7px}.method-step-signal{margin-top:3px}
}
@media(max-width:380px){.method-console{grid-template-columns:90px 1fr;gap:9px}.method-enhanced .method-step{padding:23px 21px;min-height:365px}.method-enhanced .method-step h3{font-size:29px}.method-console-head{font-size:6px}.method-current-label{font-size:7px}}
body.reduced .method-key,body.reduced .method-key-top:after,body.reduced .method-step,body.reduced .method-step *,body.reduced .method-route-stop,body.reduced .method-route-stop i{transition:none!important;animation:none!important}
body.reduced .method-key,body.reduced .method-key:hover,body.reduced .method-key:active{transform:rotateX(20deg) rotateY(-13deg) rotateZ(-9deg)}
body.reduced .method-orbit-dot,body.reduced .method-key-orbit>i:nth-child(2){transform:none}
@media(prefers-reduced-motion:reduce){.method-key,.method-key-top:after,.method-step,.method-step *,.method-route-stop,.method-route-stop i{transition:none!important;animation:none!important}}
