.method-page{background:#17191c;overflow-x:hidden}
.method-header{position:absolute;top:28px;left:40px;z-index:10}
.method-main{position:relative;isolation:isolate;min-height:100svh;overflow:hidden}
.method-sky{position:absolute;inset:0;z-index:-1;background:linear-gradient(#526383,#d4b8c6);opacity:0;transition:opacity 1.2s ease}
.method-sky .sky-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:1}
.portal-entry{display:grid;place-items:center;min-height:100svh;padding:90px 10px 24px;transition:opacity .65s,transform 1.25s cubic-bezier(.7,0,.2,1);transform-origin:center 55%}
.portal-window{position:relative;display:block;width:min(490px,84vw,66svh);aspect-ratio:2/3;padding:0;border:0;background:transparent;isolation:isolate;transition:transform .8s var(--ease);animation:portal-arrive 1.3s var(--ease) backwards}
.portal-window img{display:block;width:100%;height:100%;object-fit:contain;mask-image:radial-gradient(ellipse 66% 65% at center,#000 55%,transparent 96%);-webkit-mask-image:radial-gradient(ellipse 66% 65% at center,#000 55%,transparent 96%);pointer-events:none}
.portal-label{position:absolute;left:23%;right:23%;top:43%;color:#102b3b;font-size:clamp(20px,2.8vw,34px);font-weight:500;line-height:1.1;letter-spacing:-.045em;text-align:center;text-wrap:balance;text-shadow:0 1px 12px #ffffff70;transition:transform .65s var(--ease)}
.portal-window:hover{transform:translateY(-5px) scale(1.025)}
.portal-window:hover .portal-label{transform:translateY(-3px)}
.portal-window:focus-visible{outline-offset:-32px;border-radius:45%}
.method-page.is-entering .portal-entry{opacity:0;transform:scale(3.5);pointer-events:none}
.method-page.is-entering .method-sky,.method-page.has-entered .method-sky{opacity:1}
.method-journey{min-height:100svh;padding:132px 0 40px;display:flex;flex-direction:column;align-items:center;justify-content:center;animation:journey-arrive 1s var(--ease) both}
.method-journey h1{position:relative;margin:0 20px 48px;text-align:center;font-size:clamp(36px,5.3vw,76px);line-height:1.04;font-weight:400;letter-spacing:-.065em;color:#f9fcfd;text-shadow:0 3px 24px #0c527747;outline:none}
.mobile-break{display:none}
.paper-stage{position:relative;width:100%;height:clamp(300px,40vh,400px);perspective:1600px;--paper-width:clamp(220px,22vw,300px);--spread:clamp(140px,20vw,260px);margin:0 auto}
.method-paper{position:absolute;left:50%;top:0;width:var(--paper-width);height:100%;padding:40px 30px;border:1px solid #ffffff8c;border-radius:20px;background:linear-gradient(155deg,#fff,#edf6f9);color:#183747;text-align:left;transform:translateX(calc(-50% + var(--distance)*var(--spread))) translateY(calc(var(--away)*16px)) rotate(calc(var(--distance)*7deg)) rotateY(calc(var(--distance)*-8deg)) scale(var(--scale));opacity:var(--opacity);z-index:var(--z);box-shadow:0 18px 50px #14537426,inset 0 1px 0 #fff;transition:transform .85s var(--ease),opacity .65s,box-shadow .5s,background .5s;display:flex;align-items:center;overflow:hidden}
.method-paper:hover{box-shadow:0 22px 65px #13436345,inset 0 1px 0 #fff;background:#fff}
.method-paper:focus-visible{outline:3px solid #102b3b;outline-offset:5px}
.paper-number{position:absolute;top:25px;left:27px;font-size:14px;letter-spacing:.08em;color:#487184}
.paper-copy{font-size:clamp(22px,2.45vw,33px);font-weight:450;letter-spacing:-.045em;line-height:1.16;opacity:0;filter:blur(6px);transform:translateY(14px);transition:opacity .45s .15s,filter .6s .1s,transform .65s .1s}
.method-paper[data-step="2"] .paper-copy{font-size:clamp(20px,2.1vw,29px)}
.method-paper.is-revealed .paper-copy{opacity:1;filter:blur(0);transform:none}
.result-intro{display:block;font-size:.65em;font-weight:400;letter-spacing:-.02em;color:#487184;margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid #b7cbd5}.result-outcome{display:block;font-weight:550;line-height:1.12}
.method-controls{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:60px;z-index:3}
.method-controls button{display:grid;place-items:center;padding:0;width:42px;height:42px;border:1px solid #ffffff70;border-radius:50%;background:#ffffff20;color:#143d51;font-size:20px;transition:background .2s,transform .2s;backdrop-filter:blur(12px)}
.method-controls button:hover{background:#fff;transform:translateY(-2px)}
.method-controls button:disabled{opacity:.3;cursor:default;transform:none}
.paper-pagination{display:flex;gap:3px}
.paper-pagination button{font-size:14px;width:36px;height:36px;border-color:transparent;background:transparent}
.paper-pagination button[aria-current="step"]{background:#f7fcff;box-shadow:0 3px 16px #15536d22}
.method-announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@keyframes portal-arrive{from{opacity:0;transform:translateY(22px) scale(.96)}to{opacity:1;transform:none}}
@keyframes journey-arrive{from{opacity:0;transform:translateY(25px) scale(.97)}to{opacity:1;transform:none}}
@media(max-width:680px){.method-header{left:20px;top:20px}.portal-entry{padding-top:80px}.portal-window{width:min(470px,100vw,70svh)}.portal-label{font-size:clamp(20px,6.2vw,30px)}.method-journey{padding-top:116px;padding-bottom:34px}.method-journey h1{margin-bottom:40px;font-size:clamp(34px,9.8vw,52px)}.mobile-break{display:block}.paper-stage{--paper-width:min(67vw,285px);--spread:calc(min(67vw,285px) + 20px);height:clamp(300px,42svh,380px)}.method-paper{padding:44px 26px}.paper-copy{font-size:clamp(24px,6.6vw,30px)}.method-paper[data-step="2"] .paper-copy{font-size:clamp(22px,5.9vw,27px)}.method-controls{gap:7px;margin-top:42px}.method-controls>button{width:38px;height:38px}.paper-pagination button{width:34px;height:38px}}
@media(prefers-reduced-motion:reduce){.portal-window,.method-journey{animation:none}.portal-entry,.method-paper,.paper-copy,.method-sky{transition:none}.method-page.is-entering .portal-entry{transform:none}}

.method-paper[data-step="4"] .paper-copy{font-size:clamp(21px,2vw,26px);line-height:1.2}
.method-paper[data-step="4"] .result-intro{font-size:16px;margin-bottom:16px;padding-bottom:12px}
.result-note{display:block;font-size:16px;line-height:1.4;letter-spacing:-.02em;font-weight:400;margin-top:20px;color:#47606e}
.paper-stage{min-height:380px}
@media(max-width:680px){.method-paper[data-step="4"]{padding:30px 23px}.method-paper[data-step="4"] .paper-copy{font-size:22px}.result-note{font-size:15px;margin-top:15px}}

.portal-hint{position:absolute;left:15%;right:15%;bottom:9%;font-size:14px;letter-spacing:.015em;color:#eeefef;text-align:center;text-shadow:0 2px 10px #0009}
.method-paper{touch-action:pan-y;user-select:none;-webkit-user-select:none}
.paper-stage{isolation:isolate}
.method-controls{position:relative;z-index:10}
.portal-window{touch-action:manipulation}
@media(hover:none),(pointer:coarse){.portal-window:hover,.portal-window:hover .portal-label{transform:none}}
.method-paper[data-step="5"] .paper-copy{font-size:clamp(22px,2.1vw,29px)}
@media(max-width:680px){.method-controls{gap:5px}.paper-pagination{gap:2px}.paper-pagination button{width:29px;font-size:13px}.method-controls>button{width:34px}.method-paper[data-step="5"] .paper-copy{font-size:clamp(22px,5.9vw,27px)}}
@media(max-width:680px){
 .method-controls{display:grid;grid-template-columns:44px 1fr 44px;gap:10px;width:min(284px,calc(100% - 32px))}
 .method-controls>button{width:44px;height:44px}
 .paper-prev{grid-column:1;grid-row:1}.paper-next{grid-column:3;grid-row:1}
 .paper-pagination{grid-column:1/-1;grid-row:2;display:flex;justify-content:space-between;gap:2px}
 .paper-pagination button{width:44px;height:44px;flex-shrink:0}
}