.howto-page{--howto-world-accent: var(--accent);--howto-world-accent-strong: var(--accent-strong);--howto-world-line: color-mix(in srgb, var(--accent) 28%, var(--border));--howto-link-distance: clamp(4rem, 14vw, 11rem);--howto-travel-distance: clamp(6rem, 22vw, 18rem)}.howto-control-deck{position:relative;display:grid;grid-template-columns:clamp(19rem,24vw,23rem) minmax(0,1fr);align-items:start;gap:clamp(1rem,2vw,1.5rem);scroll-margin-top:calc(var(--desktop-header-height) + 1.5rem)}.howto-control-rail{position:sticky;top:calc(var(--desktop-header-height) + 1rem);isolation:isolate;min-width:0;max-height:calc(100dvh - var(--desktop-header-height) - 2rem);display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;border-color:color-mix(in srgb,var(--accent) 22%,var(--border));background:linear-gradient(145deg,color-mix(in srgb,var(--highlight) 42%,transparent),transparent 34%),var(--art-pattern-primary),var(--material-panel);background-blend-mode:normal,var(--art-blend-mode),normal;box-shadow:var(--shadow-panel)}.howto-control-rail:before{content:"";position:absolute;inset:-20% -30% auto;z-index:-1;height:17rem;pointer-events:none;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 15%,transparent),transparent 66%);filter:blur(1.5rem);animation:howto-rail-ambient 8s ease-in-out infinite alternate}.howto-control-rail-heading{min-height:6.3rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--border-subtle);padding:1rem 1.1rem;background:color-mix(in srgb,var(--surface-overlay) 78%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.howto-control-rail-heading h2{margin:.24rem 0 0;color:var(--text-primary);font-size:clamp(1.15rem,1.5vw,1.45rem);letter-spacing:-.035em}.howto-control-counter{display:grid;grid-template-columns:auto 1.4rem auto;align-items:center;gap:.38rem;color:var(--text-tertiary);font-size:.66rem;font-weight:900;letter-spacing:.08em}.howto-control-counter i{height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent)}.howto-control-track{position:absolute;left:2.54rem;top:8.45rem;bottom:4.5rem;z-index:0;width:2px;overflow:hidden;border-radius:999px;background:color-mix(in srgb,var(--border) 70%,transparent);pointer-events:none}.howto-control-track>span{display:block;width:100%;height:var(--howto-rail-progress);border-radius:inherit;background:linear-gradient(180deg,var(--accent),var(--accent-strong));box-shadow:0 0 1rem color-mix(in srgb,var(--accent) 70%,transparent);transition:height var(--motion-panel) var(--ease-emphasized)}.howto-step-selector{position:relative;z-index:1;min-height:0;display:grid;align-content:start;gap:.52rem;overflow-y:auto;overscroll-behavior:contain;margin:0;padding:.82rem;list-style:none;scrollbar-width:thin}.howto-step-option{position:relative;width:100%;min-height:4.75rem;display:grid;grid-template-columns:2.15rem 2.5rem minmax(0,1fr) 2.15rem;align-items:center;gap:.68rem;overflow:hidden;border:1px solid var(--border-subtle);border-radius:var(--radius-control);background:color-mix(in srgb,var(--surface-subtle) 78%,transparent);color:var(--text-primary);padding:.64rem .7rem;text-align:left;cursor:pointer;box-shadow:inset 0 1px color-mix(in srgb,var(--highlight) 72%,transparent);transition:transform var(--motion-control) var(--ease-emphasized),border-color var(--motion-control),background-color var(--motion-control),box-shadow var(--motion-control)}.howto-step-option:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 16%,color-mix(in srgb,var(--accent) 12%,transparent) 46%,transparent 72%);transform:translate(-115%);opacity:0}.howto-step-option:hover,.howto-step-option:focus-visible{border-color:color-mix(in srgb,var(--accent) 42%,var(--border));background:color-mix(in srgb,var(--accent-soft) 32%,var(--surface-raised));transform:translate(.2rem)}.howto-step-option:hover:before,.howto-step-option:focus-visible:before{opacity:1;animation:howto-option-sheen 1.1s ease both}.howto-step-option-active{border-color:color-mix(in srgb,var(--accent) 72%,var(--border));background:linear-gradient(105deg,color-mix(in srgb,var(--accent) 15%,transparent),transparent 68%),var(--surface-raised);box-shadow:inset 3px 0 0 var(--accent),inset 0 1px 0 var(--highlight),0 0 1.7rem color-mix(in srgb,var(--accent) 10%,transparent);transform:translate(.26rem)}.howto-step-option-complete{border-color:color-mix(in srgb,var(--success) 26%,var(--border))}.howto-step-option-node,.howto-step-option-icon{position:relative;z-index:1;display:grid;place-items:center;flex:0 0 auto}.howto-step-option-node{width:2rem;height:2rem;border:1px solid color-mix(in srgb,var(--accent) 26%,var(--border));border-radius:999px;background:var(--surface-panel);color:var(--accent);font-size:.62rem;font-weight:950;box-shadow:0 0 0 .25rem color-mix(in srgb,var(--surface-panel) 84%,transparent)}.howto-step-option-active .howto-step-option-node{background:var(--button-primary-background);color:var(--text-on-accent);box-shadow:0 0 0 .25rem color-mix(in srgb,var(--accent) 12%,transparent),0 0 1rem color-mix(in srgb,var(--accent) 34%,transparent)}.howto-step-option-complete .howto-step-option-node{border-color:color-mix(in srgb,var(--success) 45%,var(--border));background:var(--success-surface);color:var(--success)}.howto-step-option-icon{width:2.35rem;height:2.35rem;border-radius:.74rem;background:var(--accent-soft);color:var(--accent)}.howto-step-option-copy{position:relative;z-index:1;min-width:0;display:grid;gap:.16rem}.howto-step-option-copy strong{overflow:hidden;color:var(--text-primary);font-size:.82rem;letter-spacing:-.018em;text-overflow:ellipsis;white-space:nowrap}.howto-step-option-copy small{color:var(--text-tertiary);font-size:.62rem;font-weight:700}.howto-step-option-active .howto-step-option-copy small{color:var(--accent)}.howto-step-option-wave{position:relative;z-index:1;height:1.5rem;display:flex;align-items:center;justify-content:center;gap:.17rem;opacity:.34}.howto-step-option-wave i{width:2px;height:.35rem;border-radius:999px;background:var(--accent);transform-origin:center}.howto-step-option-active .howto-step-option-wave{opacity:1}.howto-step-option-active .howto-step-option-wave i{animation:howto-wave .85s ease-in-out infinite alternate}.howto-step-option-active .howto-step-option-wave i:nth-child(2){animation-delay:.13s}.howto-step-option-active .howto-step-option-wave i:nth-child(3){animation-delay:.26s}.howto-step-option-active .howto-step-option-wave i:nth-child(4){animation-delay:.39s}.howto-control-rail-footer{min-height:3.8rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;border-top:1px solid var(--border-subtle);padding:.8rem 1rem;background:color-mix(in srgb,var(--surface-overlay) 82%,transparent);color:var(--text-tertiary);font-size:.64rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.howto-control-rail-footer span{display:flex;align-items:center;gap:.45rem}.howto-control-rail-footer i,.howto-viewport-signal i,.howto-step-controls>span i{width:.42rem;height:.42rem;flex:0 0 auto;border-radius:999px;background:var(--success);box-shadow:0 0 .8rem var(--success);animation:howto-live-pulse 1.45s ease-in-out infinite}.howto-control-rail-footer strong{color:var(--accent);font-size:.72rem}.howto-step-viewport{position:relative;isolation:isolate;min-width:0;overflow:hidden;border-color:color-mix(in srgb,var(--accent) 24%,var(--border));background:linear-gradient(135deg,color-mix(in srgb,var(--highlight) 42%,transparent),transparent 35%),var(--art-pattern-secondary),var(--material-panel);background-blend-mode:normal,var(--art-blend-mode),normal;box-shadow:var(--shadow-panel)}.howto-step-viewport:before,.howto-step-viewport:after{content:"";position:absolute;z-index:-1;pointer-events:none}.howto-step-viewport:before{right:-14rem;top:-13rem;width:31rem;height:31rem;border-radius:999px;background:color-mix(in srgb,var(--accent) 9%,transparent);filter:blur(3.4rem);animation:howto-viewport-ambient 9s ease-in-out infinite alternate}.howto-step-viewport:after{inset:0;background:linear-gradient(105deg,transparent 35%,color-mix(in srgb,var(--highlight) 16%,transparent) 50%,transparent 65%);transform:translate(-120%);animation:howto-viewport-light 8s ease-in-out infinite}.howto-step-forward{animation:howto-view-enter-forward var(--motion-panel) var(--ease-emphasized) both}.howto-step-backward{animation:howto-view-enter-backward var(--motion-panel) var(--ease-emphasized) both}.howto-step-direct{animation:howto-view-enter-direct var(--motion-panel) var(--ease-emphasized) both}.howto-viewport-toolbar{position:relative;z-index:4;min-height:3.65rem;display:grid;grid-template-columns:auto auto minmax(10rem,1fr);align-items:center;gap:1rem;border-bottom:1px solid var(--border-subtle);padding:.72rem clamp(.9rem,2vw,1.35rem);background:color-mix(in srgb,var(--surface-overlay) 84%,transparent);color:var(--text-tertiary);font-size:.62rem;font-weight:900;letter-spacing:.11em;text-transform:uppercase;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.howto-viewport-signal{display:flex;align-items:center;gap:.45rem;color:var(--success)}.howto-viewport-path{color:var(--text-secondary)}.howto-viewport-progress{min-width:0;display:grid;grid-template-columns:minmax(5rem,1fr) auto;align-items:center;gap:.65rem}.howto-viewport-progress>i{height:.28rem;overflow:hidden;border-radius:999px;background:var(--surface-subtle);box-shadow:inset 0 0 0 1px var(--border-subtle)}.howto-viewport-progress>i>b{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--accent-strong));box-shadow:0 0 1rem color-mix(in srgb,var(--accent) 44%,transparent);transition:width var(--motion-panel) var(--ease-emphasized)}.howto-viewport-progress strong{color:var(--accent)}.howto-viewport-stage{position:relative;z-index:2;min-width:0;display:grid;grid-template-columns:minmax(25rem,1.08fr) minmax(22rem,.92fr)}.howto-viewport-art{position:relative;min-width:0;min-height:42rem;display:grid;padding:clamp(.8rem,1.5vw,1.15rem);border-right:1px solid var(--border-subtle);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 6%,transparent),transparent 42%),color-mix(in srgb,var(--surface-subtle) 80%,transparent)}.howto-viewport-art>.howto-step-world{min-height:100%;align-self:stretch;border:1px solid color-mix(in srgb,var(--accent) 22%,var(--border));box-shadow:inset 0 1px 0 var(--highlight),var(--shadow-raised)}.howto-viewport-sweep{position:absolute;left:1rem;right:1rem;top:1rem;z-index:6;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,var(--accent),transparent);box-shadow:0 0 1.25rem color-mix(in srgb,var(--accent) 70%,transparent);opacity:.52;animation:howto-stage-sweep 5.8s ease-in-out infinite}.howto-viewport-corner{position:absolute;z-index:7;width:1.15rem;height:1.15rem;pointer-events:none;border-color:color-mix(in srgb,var(--accent) 72%,transparent);border-style:solid}.howto-viewport-corner-a{left:1.5rem;top:1.5rem;border-width:2px 0 0 2px}.howto-viewport-corner-b{right:1.5rem;top:1.5rem;border-width:2px 2px 0 0}.howto-viewport-corner-c{left:1.5rem;bottom:1.5rem;border-width:0 0 2px 2px}.howto-viewport-corner-d{right:1.5rem;bottom:1.5rem;border-width:0 2px 2px 0}.howto-viewport-art-caption{position:absolute;left:clamp(1.5rem,2.5vw,2.2rem);right:clamp(1.5rem,2.5vw,2.2rem);bottom:clamp(1.5rem,2.5vw,2.2rem);z-index:8;min-height:3.2rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;border:1px solid color-mix(in srgb,var(--accent) 24%,var(--border));border-radius:var(--radius-control);background:color-mix(in srgb,var(--surface-overlay) 82%,transparent);color:var(--text-tertiary);padding:.7rem .85rem;font-size:.62rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:var(--shadow-raised)}.howto-viewport-art-caption span:first-child{display:flex;align-items:center;gap:.45rem;color:var(--text-primary)}.howto-viewport-art-caption svg{color:var(--accent)}.howto-viewport-copy{min-width:0;align-content:start;gap:1.15rem;padding:clamp(1.2rem,2.6vw,2.4rem);background:color-mix(in srgb,var(--surface-panel) 82%,transparent)}.howto-step-heading{align-items:center}.howto-step-heading>span{width:3.4rem;height:3.4rem;border:1px solid color-mix(in srgb,var(--accent) 28%,var(--border));background:var(--accent-soft);color:var(--accent);box-shadow:inset 0 1px 0 var(--highlight),0 0 1.4rem color-mix(in srgb,var(--accent) 8%,transparent)}.howto-checklist{counter-reset:howto-checks;gap:.62rem}.howto-checklist li{min-height:3.8rem;align-items:center;gap:.85rem;border:1px solid var(--border-subtle);border-radius:var(--radius-control);background:color-mix(in srgb,var(--surface-subtle) 76%,transparent);padding:.68rem;transition:border-color var(--motion-control),transform var(--motion-control),background-color var(--motion-control)}.howto-checklist li:hover{border-color:color-mix(in srgb,var(--accent) 36%,var(--border));background:color-mix(in srgb,var(--accent-soft) 36%,var(--surface-subtle));transform:translate(.18rem)}.howto-checklist li>span{width:2.15rem;height:2.15rem;border:1px solid color-mix(in srgb,var(--accent) 28%,var(--border));border-radius:.68rem;background:var(--surface-raised);color:var(--accent);font-size:.63rem;font-weight:950}.howto-step-note{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:.68rem;border:1px solid color-mix(in srgb,var(--warning) 22%,var(--border));border-left-width:3px;border-radius:var(--radius-control);background:color-mix(in srgb,var(--warning-surface) 42%,transparent);padding:.85rem .95rem;color:var(--text-secondary);font-size:.78rem;line-height:1.6}.howto-step-note svg{margin-top:.14rem;color:var(--warning)}.howto-screenshot-grid{margin-top:.1rem}.howto-step-controls{position:relative;z-index:4;background:color-mix(in srgb,var(--surface-overlay) 88%,transparent);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.howto-step-controls>span{display:flex;align-items:center;gap:.45rem;font-weight:800;letter-spacing:.04em}.howto-step-world{position:relative;width:100%;min-height:23rem;overflow:hidden;isolation:isolate;border-radius:calc(var(--radius-card) - 1px);background:radial-gradient(circle at 76% 18%,color-mix(in srgb,var(--howto-world-accent) 16%,transparent),transparent 31%),radial-gradient(circle at 14% 84%,color-mix(in srgb,var(--howto-world-accent-strong) 10%,transparent),transparent 35%),linear-gradient(145deg,color-mix(in srgb,var(--surface-raised) 88%,transparent),var(--surface-subtle))}.howto-step-world-compact{--howto-link-distance: 6rem;--howto-travel-distance: 7.5rem;min-height:10.5rem;border-radius:0}.howto-world-grid{position:absolute;inset:0;z-index:-2;background:linear-gradient(color-mix(in srgb,var(--howto-world-line) 38%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--howto-world-line) 38%,transparent) 1px,transparent 1px);background-size:2rem 2rem;-webkit-mask-image:linear-gradient(to bottom,black,transparent 92%);mask-image:linear-gradient(to bottom,black,transparent 92%);opacity:.65}.howto-world-glow{position:absolute;right:-12%;top:-18%;z-index:-1;width:54%;aspect-ratio:1;border-radius:999px;background:color-mix(in srgb,var(--howto-world-accent) 16%,transparent);filter:blur(2.6rem);animation:howto-world-breathe calc(var(--motion-ambient) * .85) ease-in-out infinite alternate}.howto-world-index{position:absolute;right:5%;top:4%;color:color-mix(in srgb,var(--text-primary) 7%,transparent);font-family:var(--font-display);font-size:clamp(3.4rem,8vw,8rem);font-weight:920;line-height:1;letter-spacing:-.08em;-webkit-user-select:none;user-select:none}.howto-step-world-compact .howto-world-index{font-size:3.2rem}.howto-world-icon{position:absolute;left:5%;top:7%;width:3.25rem;height:3.25rem;display:grid;place-items:center;z-index:3;border:1px solid color-mix(in srgb,var(--howto-world-accent) 38%,var(--border));border-radius:1rem;background:color-mix(in srgb,var(--surface-overlay) 88%,transparent);color:var(--howto-world-accent);box-shadow:var(--shadow-raised),inset 0 1px 0 var(--highlight);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.howto-step-world-compact .howto-world-icon{width:2.35rem;height:2.35rem;border-radius:.75rem}.howto-world-status{position:absolute;right:5%;bottom:5%;z-index:4;display:inline-flex;align-items:center;gap:.38rem;color:var(--text-tertiary);font-size:.58rem;font-weight:850;letter-spacing:.14em}.howto-world-status i{width:.4rem;height:.4rem;border-radius:999px;background:var(--success);box-shadow:0 0 .8rem var(--success);animation:howto-live-pulse calc(var(--motion-control) * 5) ease-in-out infinite}.howto-step-world-compact .howto-world-status{display:none}.howto-world-scene{position:absolute;inset:0}.howto-id-card{position:absolute;left:17%;top:30%;width:55%;height:43%;display:grid;grid-template-columns:auto 1fr;grid-template-rows:1fr .5rem .5rem auto;gap:.7rem .85rem;align-items:center;padding:1.15rem;border:1px solid color-mix(in srgb,var(--howto-world-accent) 34%,var(--border));border-radius:1.1rem;background:color-mix(in srgb,var(--surface-overlay) 88%,transparent);box-shadow:var(--shadow-overlay);transform:rotate(-4deg);animation:howto-card-float calc(var(--motion-ambient) * .55) ease-in-out infinite alternate;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.howto-id-avatar{grid-row:1 / 4;width:4.5rem;height:4.5rem;display:grid;place-items:center;border-radius:1.25rem;background:var(--button-primary-background);color:var(--text-on-accent);box-shadow:0 0 2rem color-mix(in srgb,var(--howto-world-accent) 20%,transparent)}.howto-id-line{display:block;height:.45rem;border-radius:999px;background:var(--border-strong);opacity:.6}.howto-id-line-a{width:85%}.howto-id-line-b{width:58%}.howto-id-card b{grid-column:1 / 3;justify-self:end;color:var(--success);font-size:.65rem;letter-spacing:.15em}.howto-auth-key{position:absolute;right:12%;top:43%;width:25%;height:18%;display:flex;align-items:center;justify-content:center;gap:.45rem;border:1px solid var(--border);border-radius:.85rem;background:var(--surface-raised);box-shadow:var(--shadow-raised);transform:rotate(5deg)}.howto-auth-key i{width:.55rem;height:.55rem;border-radius:999px;background:var(--howto-world-accent);animation:howto-key-blink 1.4s ease-in-out infinite}.howto-auth-key i:nth-child(2){animation-delay:.18s}.howto-auth-key i:nth-child(3){animation-delay:.36s}.howto-auth-pulse{position:absolute;right:18%;top:29%;width:4rem;height:4rem;border:1px solid color-mix(in srgb,var(--success) 55%,transparent);border-radius:999px;animation:howto-auth-pulse 2.1s ease-out infinite}.howto-step-world-compact .howto-id-card{left:18%;top:29%;width:58%;height:45%;padding:.55rem;gap:.3rem}.howto-step-world-compact .howto-id-avatar{width:2.2rem;height:2.2rem;border-radius:.65rem}.howto-step-world-compact .howto-auth-key{right:9%;top:46%}.howto-step-world-compact .howto-auth-pulse{display:none}.howto-search-window{position:absolute;inset:24% 14% 16% 15%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto 1fr;gap:.75rem;padding:.9rem;border:1px solid var(--border);border-radius:1.2rem;background:color-mix(in srgb,var(--surface-overlay) 90%,transparent);box-shadow:var(--shadow-overlay);transform:perspective(800px) rotateX(4deg) rotateY(-5deg);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.howto-search-bar{grid-column:1 / 4;min-height:2.5rem;display:flex;align-items:center;gap:.6rem;border:1px solid color-mix(in srgb,var(--howto-world-accent) 28%,var(--border));border-radius:.75rem;background:var(--surface-subtle);color:var(--howto-world-accent);padding:.6rem .75rem}.howto-search-bar b{width:55%;height:.45rem;border-radius:999px;background:var(--border-strong);opacity:.55}.howto-search-tile{position:relative;border-radius:.75rem;background:linear-gradient(145deg,var(--surface-raised),color-mix(in srgb,var(--howto-world-accent) 8%,var(--surface-subtle)));overflow:hidden}.howto-search-tile:after{content:"";position:absolute;left:12%;right:28%;bottom:12%;height:.35rem;border-radius:999px;background:var(--border-strong);opacity:.5}.howto-search-lens{position:absolute;right:9%;bottom:10%;width:6.5rem;height:6.5rem;display:grid;place-items:center;border:2px solid color-mix(in srgb,var(--howto-world-accent) 72%,white 8%);border-radius:999px;background:color-mix(in srgb,var(--howto-world-accent) 8%,transparent);box-shadow:0 0 2rem color-mix(in srgb,var(--howto-world-accent) 20%,transparent);animation:howto-lens-move 5.5s var(--ease-standard) infinite alternate;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.howto-search-lens:after{content:"";position:absolute;right:-2rem;bottom:-1.15rem;width:3.3rem;height:.65rem;border-radius:999px;background:var(--howto-world-accent);transform:rotate(42deg);transform-origin:left center}.howto-search-lens i{width:2rem;height:2rem;border:1px dashed var(--howto-world-accent);border-radius:.5rem}.howto-search-scan{position:absolute;left:14%;right:14%;top:37%;height:1px;background:linear-gradient(90deg,transparent,var(--howto-world-accent),transparent);box-shadow:0 0 1rem var(--howto-world-accent);animation:howto-search-scan 3.2s ease-in-out infinite alternate}.howto-step-world-compact .howto-search-window{inset:22% 13% 12% 18%;gap:.3rem;padding:.4rem;border-radius:.7rem}.howto-step-world-compact .howto-search-bar{min-height:1.2rem;padding:.2rem .3rem}.howto-step-world-compact .howto-search-lens{width:2.7rem;height:2.7rem;right:8%;bottom:8%}.howto-step-world-compact .howto-search-lens:after{width:1.35rem;height:.3rem;right:-.8rem;bottom:-.4rem}.howto-step-world-compact .howto-search-lens i{width:.9rem;height:.9rem}.howto-world-scene-link{display:flex;align-items:center;justify-content:center;gap:clamp(1rem,5vw,4rem)}.howto-link-source,.howto-link-agent{position:relative;z-index:2;width:24%;aspect-ratio:.95;display:grid;place-items:center;border:1px solid var(--border);border-radius:1.25rem;background:color-mix(in srgb,var(--surface-overlay) 88%,transparent);box-shadow:var(--shadow-raised);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.howto-link-source{transform:rotate(-5deg)}.howto-link-source i{width:55%;height:.5rem;border-radius:999px;background:var(--border-strong);opacity:.52}.howto-link-source i:nth-child(2){width:35%}.howto-link-source b,.howto-link-agent b{color:var(--text-tertiary);font-size:.58rem;letter-spacing:.14em}.howto-link-agent{color:var(--howto-world-accent);transform:rotate(5deg)}.howto-link-agent svg{width:2.4rem;height:2.4rem}.howto-link-tunnel{position:absolute;left:32%;right:32%;top:50%;height:3.25rem;display:flex;align-items:center;justify-content:space-around;border-block:1px solid color-mix(in srgb,var(--howto-world-accent) 32%,transparent);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--howto-world-accent) 12%,transparent),transparent);transform:translateY(-50%)}.howto-link-tunnel i{width:.75rem;height:.75rem;border:1px solid var(--howto-world-accent);transform:rotate(45deg);animation:howto-tunnel-pulse 1.8s ease-in-out infinite}.howto-link-tunnel i:nth-child(2){animation-delay:.25s}.howto-link-tunnel i:nth-child(3){animation-delay:.5s}.howto-link-packet{position:absolute;left:30%;top:calc(50% - .3rem);width:.6rem;height:.6rem;border-radius:999px;background:var(--howto-world-accent);box-shadow:0 0 1rem var(--howto-world-accent);animation:howto-link-travel 2.8s linear infinite}.howto-link-packet-b{animation-delay:1.4s}.howto-step-world-compact .howto-world-scene-link{gap:2.1rem}.howto-step-world-compact :is(.howto-link-source,.howto-link-agent){width:25%;border-radius:.65rem}.howto-step-world-compact .howto-link-agent svg{width:1rem;height:1rem}.howto-step-world-compact .howto-link-tunnel{height:1.4rem}.howto-step-world-compact .howto-link-tunnel i{width:.35rem;height:.35rem}.howto-payment-card{position:absolute;left:14%;top:31%;width:48%;height:40%;display:grid;align-content:space-between;padding:1.25rem;border:1px solid color-mix(in srgb,var(--howto-world-accent) 36%,var(--border));border-radius:1.25rem;background:linear-gradient(135deg,color-mix(in srgb,var(--howto-world-accent) 24%,transparent),transparent 45%),var(--surface-overlay);color:var(--text-primary);box-shadow:var(--shadow-overlay);transform:rotate(-6deg);animation:howto-payment-float calc(var(--motion-ambient) * .6) ease-in-out infinite alternate}.howto-payment-chip{width:2.6rem;height:1.9rem;border:1px solid var(--howto-world-accent);border-radius:.45rem;background:color-mix(in srgb,var(--howto-world-accent) 16%,transparent)}.howto-payment-card b{align-self:end;font-size:.75rem;letter-spacing:.18em}.howto-payment-wave{position:absolute;right:12%;top:16%;width:2.5rem;height:2.5rem;border:1px solid color-mix(in srgb,var(--howto-world-accent) 55%,transparent);border-left-color:transparent;border-bottom-color:transparent;border-radius:999px;transform:rotate(45deg)}.howto-payment-receipt{position:absolute;right:15%;top:24%;width:29%;height:54%;display:grid;align-content:center;gap:.75rem;padding:1rem;border:1px solid var(--border);border-radius:.75rem;background:var(--surface-raised);box-shadow:var(--shadow-raised);transform:rotate(5deg)}.howto-payment-receipt i{height:.4rem;border-radius:999px;background:var(--border-strong);opacity:.55}.howto-payment-receipt i:nth-child(2){width:70%}.howto-payment-receipt strong{color:var(--success);font-size:.65rem;letter-spacing:.15em}.howto-payment-confirm{position:absolute;right:10%;bottom:13%;width:3.4rem;height:3.4rem;display:grid;place-items:center;border-radius:999px;background:var(--success);color:var(--text-on-accent);box-shadow:0 0 color-mix(in srgb,var(--success) 40%,transparent);animation:howto-payment-confirm 2s ease-out infinite}.howto-step-world-compact .howto-payment-card{left:15%;top:31%;width:49%;height:40%;padding:.55rem;border-radius:.7rem}.howto-step-world-compact .howto-payment-chip{width:1.2rem;height:.8rem}.howto-step-world-compact .howto-payment-receipt{right:13%;top:25%;width:30%;height:50%;padding:.4rem;gap:.3rem}.howto-step-world-compact .howto-payment-confirm{width:1.7rem;height:1.7rem;right:8%;bottom:11%}.howto-qc-frame{position:absolute;inset:20% 18% 17%;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--howto-world-accent) 25%,var(--border));background:color-mix(in srgb,var(--surface-overlay) 76%,transparent);box-shadow:inset 0 0 3rem color-mix(in srgb,var(--howto-world-accent) 8%,transparent),var(--shadow-raised);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.howto-qc-corner{position:absolute;width:2.3rem;height:2.3rem;border-color:var(--howto-world-accent);border-style:solid}.howto-qc-corner-a{left:-1px;top:-1px;border-width:2px 0 0 2px}.howto-qc-corner-b{right:-1px;top:-1px;border-width:2px 2px 0 0}.howto-qc-corner-c{right:-1px;bottom:-1px;border-width:0 2px 2px 0}.howto-qc-corner-d{left:-1px;bottom:-1px;border-width:0 0 2px 2px}.howto-qc-product{width:34%;aspect-ratio:.8;border-radius:1rem 1rem .4rem .4rem;background:linear-gradient(145deg,color-mix(in srgb,var(--howto-world-accent) 26%,var(--surface-raised)),var(--surface-subtle));box-shadow:0 1.5rem 2rem color-mix(in srgb,var(--canvas) 26%,transparent);transform:perspective(600px) rotateY(-8deg)}.howto-qc-product:before{content:"";position:absolute;left:18%;right:18%;top:17%;height:.7rem;border-radius:999px;background:color-mix(in srgb,var(--text-primary) 30%,transparent)}.howto-qc-scan{position:absolute;left:5%;right:5%;top:18%;height:2px;background:linear-gradient(90deg,transparent,var(--howto-world-accent),transparent);box-shadow:0 0 1.2rem var(--howto-world-accent);animation:howto-qc-scan 3s ease-in-out infinite alternate}.howto-qc-badge{position:absolute;right:11%;top:13%;display:flex;align-items:center;gap:.4rem;border:1px solid color-mix(in srgb,var(--success) 38%,var(--border));border-radius:999px;background:var(--success-surface);color:var(--success);padding:.45rem .65rem;font-size:.62rem;font-style:normal;font-weight:900;letter-spacing:.1em}.howto-qc-readout{position:absolute;left:9%;bottom:11%;display:flex;gap:.35rem}.howto-qc-readout i{width:1.4rem;height:.35rem;border-radius:999px;background:var(--howto-world-accent);opacity:.42;animation:howto-readout 1.4s ease-in-out infinite alternate}.howto-qc-readout i:nth-child(2){animation-delay:.2s}.howto-qc-readout i:nth-child(3){animation-delay:.4s}.howto-step-world-compact .howto-qc-frame{inset:20% 15% 12% 20%}.howto-step-world-compact .howto-qc-corner{width:1rem;height:1rem}.howto-step-world-compact .howto-qc-badge{right:7%;top:10%;padding:.25rem .35rem}.howto-step-world-compact .howto-qc-badge svg{display:none}.howto-step-world-compact .howto-qc-readout{display:none}.howto-ship-route{position:absolute;left:12%;right:12%;top:56%;height:2px;background:linear-gradient(90deg,var(--howto-world-accent),color-mix(in srgb,var(--howto-world-accent-strong) 72%,var(--howto-world-accent)));box-shadow:0 0 1.1rem color-mix(in srgb,var(--howto-world-accent) 40%,transparent)}.howto-ship-route i{position:absolute;top:50%;width:.9rem;height:.9rem;border:2px solid var(--howto-world-accent);border-radius:999px;background:var(--surface-panel);transform:translate(-50%,-50%)}.howto-ship-route i:nth-child(1){left:0}.howto-ship-route i:nth-child(2){left:34%}.howto-ship-route i:nth-child(3){left:68%}.howto-ship-route i:nth-child(4){left:100%}.howto-ship-package{position:absolute;left:14%;top:25%;width:22%;aspect-ratio:1.1;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--howto-world-accent) 35%,var(--border));border-radius:1rem;background:linear-gradient(145deg,color-mix(in srgb,var(--howto-world-accent) 20%,var(--surface-raised)),var(--surface-subtle));box-shadow:var(--shadow-overlay);transform:rotate(-7deg);animation:howto-package-travel 5.5s var(--ease-standard) infinite alternate}.howto-ship-package:before,.howto-ship-package:after{content:"";position:absolute;background:color-mix(in srgb,var(--text-primary) 12%,transparent)}.howto-ship-package:before{left:50%;top:0;bottom:0;width:1px}.howto-ship-package:after{left:0;right:0;top:35%;height:1px}.howto-ship-package .brand-mark{position:relative;z-index:1;width:64%;height:auto;color:var(--text-primary)}.howto-ship-package i{position:absolute;right:12%;bottom:10%;width:.65rem;height:.65rem;border-radius:999px;background:var(--success)}.howto-ship-destination{position:absolute;right:10%;top:39%;width:4.25rem;height:4.25rem;display:grid;place-items:center;border:1px solid var(--border);border-radius:1.25rem;background:var(--surface-overlay);color:var(--howto-world-accent);box-shadow:var(--shadow-raised)}.howto-ship-trail{position:absolute;left:12%;width:19%;height:1px;background:linear-gradient(90deg,transparent,var(--howto-world-accent));opacity:.45;animation:howto-ship-trail 2.2s ease-in-out infinite}.howto-ship-trail-a{top:35%}.howto-ship-trail-b{top:45%;animation-delay:.4s}.howto-step-world-compact .howto-ship-route{left:15%;right:10%;top:60%}.howto-step-world-compact .howto-ship-route i{width:.45rem;height:.45rem;border-width:1px}.howto-step-world-compact .howto-ship-package{width:24%;top:28%;border-radius:.6rem}.howto-step-world-compact .howto-ship-destination{width:2rem;height:2rem;right:7%;top:44%;border-radius:.65rem}.howto-step-world-compact .howto-ship-trail{display:none}:root[data-theme-family=glass] :is(.howto-control-rail,.howto-step-viewport,.howto-step-option,.howto-step-world){-webkit-backdrop-filter:blur(22px) saturate(135%);backdrop-filter:blur(22px) saturate(135%)}:root[data-theme-family=paper] :is(.howto-control-rail,.howto-step-viewport){border-radius:.6rem;box-shadow:.7rem .78rem color-mix(in srgb,var(--accent) 9%,transparent),var(--shadow-raised)}:root[data-theme-family=paper] :is(.howto-step-option,.howto-step-world,.howto-viewport-art-caption){border-radius:.48rem}:root[data-theme-family=mono] .howto-step-world{filter:saturate(.2)}:root[data-theme-family=prism] .howto-step-world{background:radial-gradient(circle at 78% 18%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 31%),radial-gradient(circle at 14% 82%,color-mix(in srgb,var(--warning) 12%,transparent),transparent 35%),linear-gradient(145deg,color-mix(in srgb,var(--surface-raised) 90%,transparent),var(--surface-subtle))}:root[data-theme-family=prism] .howto-world-icon{background-image:linear-gradient(135deg,var(--accent-soft),color-mix(in srgb,var(--warning) 12%,var(--surface-overlay)))}@keyframes howto-rail-ambient{0%{transform:translate3d(-6%,-4%,0) scale(.94);opacity:.55}to{transform:translate3d(7%,5%,0) scale(1.08);opacity:.95}}@keyframes howto-option-sheen{0%{transform:translate(-115%)}to{transform:translate(115%)}}@keyframes howto-wave{0%{transform:scaleY(.42)}to{transform:scaleY(2.1)}}@keyframes howto-viewport-ambient{0%{transform:translate3d(-4%,-3%,0) scale(.92);opacity:.5}to{transform:translate3d(6%,7%,0) scale(1.08);opacity:.9}}@keyframes howto-viewport-light{0%,54%{transform:translate(-120%);opacity:0}68%{opacity:.45}84%,to{transform:translate(120%);opacity:0}}@keyframes howto-stage-sweep{0%,12%{transform:translateY(0);opacity:0}20%{opacity:.58}78%{opacity:.58}92%,to{transform:translateY(38rem);opacity:0}}@keyframes howto-view-enter-forward{0%{opacity:0;transform:translate3d(1.15rem,0,0) scale(.992)}to{opacity:1;transform:none}}@keyframes howto-view-enter-backward{0%{opacity:0;transform:translate3d(-1.15rem,0,0) scale(.992)}to{opacity:1;transform:none}}@keyframes howto-view-enter-direct{0%{opacity:0;transform:translateY(.65rem)}to{opacity:1;transform:none}}@keyframes howto-world-breathe{0%{transform:scale(.82);opacity:.55}to{transform:scale(1.14);opacity:.95}}@keyframes howto-live-pulse{0%,to{opacity:.45;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}@keyframes howto-card-float{0%{transform:rotate(-5deg) translateY(.35rem)}to{transform:rotate(-2deg) translateY(-.4rem)}}@keyframes howto-key-blink{0%,to{opacity:.25;transform:scale(.8)}45%{opacity:1;transform:scale(1.08)}}@keyframes howto-auth-pulse{0%{opacity:.7;transform:scale(.35)}to{opacity:0;transform:scale(1.55)}}@keyframes howto-lens-move{0%{transform:translate(-1.2rem,-.5rem)}to{transform:translate(.9rem,.6rem)}}@keyframes howto-search-scan{0%{transform:translateY(-2rem);opacity:.2}to{transform:translateY(8rem);opacity:.9}}@keyframes howto-tunnel-pulse{0%,to{opacity:.28;transform:rotate(45deg) scale(.72)}50%{opacity:1;transform:rotate(45deg) scale(1)}}@keyframes howto-link-travel{0%{transform:translate(0);opacity:0}12%{opacity:1}88%{opacity:1}to{transform:translate(var(--howto-link-distance));opacity:0}}@keyframes howto-payment-float{0%{transform:rotate(-7deg) translateY(.3rem)}to{transform:rotate(-4deg) translateY(-.35rem)}}@keyframes howto-payment-confirm{0%{box-shadow:0 0 color-mix(in srgb,var(--success) 40%,transparent)}80%,to{box-shadow:0 0 0 1.2rem transparent}}@keyframes howto-qc-scan{0%{transform:translateY(0);opacity:.25}to{transform:translateY(12rem);opacity:.95}}@keyframes howto-readout{0%{transform:scaleX(.45);opacity:.35}to{transform:scaleX(1);opacity:.85}}@keyframes howto-package-travel{0%{transform:translate(0) rotate(-7deg) translateY(.2rem)}to{transform:translate(var(--howto-travel-distance)) rotate(5deg) translateY(-.2rem)}}@keyframes howto-ship-trail{0%{transform:translate(-30%);opacity:0}45%{opacity:.65}to{transform:translate(100%);opacity:0}}@media(max-width:79.9375rem){.howto-control-deck{grid-template-columns:minmax(0,1fr)}.howto-control-rail{position:relative;top:auto;max-height:none;grid-template-rows:auto auto auto}.howto-control-track{display:none}.howto-step-selector{grid-auto-flow:column;grid-auto-columns:minmax(16.5rem,20rem);gap:.7rem;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;padding-bottom:.95rem}.howto-step-selector li{scroll-snap-align:start}.howto-step-option{min-height:4.8rem}.howto-control-rail-footer{display:none}.howto-viewport-stage{grid-template-columns:minmax(22rem,.95fr) minmax(22rem,1.05fr)}.howto-viewport-art{min-height:36rem}}@media(max-width:63.9375rem){.howto-viewport-stage{grid-template-columns:minmax(0,1fr)}.howto-viewport-art{min-height:30rem;border-right:0;border-bottom:1px solid var(--border-subtle)}.howto-viewport-art>.howto-step-world{min-height:29rem}.howto-viewport-copy{padding:clamp(1.1rem,3vw,2rem)}}@media(max-width:47.9375rem){.howto-control-deck{gap:.85rem}.howto-control-rail-heading{min-height:5.4rem;padding:.85rem}.howto-step-selector{grid-auto-columns:minmax(16rem,84vw);padding:.72rem}.howto-step-option{grid-template-columns:2rem 2.35rem minmax(0,1fr) 1.8rem;min-height:4.6rem;gap:.55rem;padding:.58rem}.howto-step-option:hover,.howto-step-option:focus-visible,.howto-step-option-active{transform:none}.howto-viewport-toolbar{grid-template-columns:auto 1fr;gap:.6rem}.howto-viewport-path{justify-self:end}.howto-viewport-progress{grid-column:1 / -1}.howto-viewport-art{min-height:23rem;padding:.7rem}.howto-viewport-art>.howto-step-world{min-height:22rem}.howto-viewport-art-caption{left:1.25rem;right:1.25rem;bottom:1.25rem}.howto-viewport-corner-a{left:1.15rem;top:1.15rem}.howto-viewport-corner-b{right:1.15rem;top:1.15rem}.howto-viewport-corner-c{left:1.15rem;bottom:1.15rem}.howto-viewport-corner-d{right:1.15rem;bottom:1.15rem}.howto-viewport-copy{padding:1rem}.howto-step-heading>span{width:2.85rem;height:2.85rem}.howto-checklist li{min-height:3.55rem}.howto-step-controls{flex-wrap:wrap;padding:.9rem}.howto-step-controls>span{order:-1;width:100%;justify-content:center}.howto-step-controls>*:not(span){flex:1;justify-content:center}.howto-id-card{left:12%;width:61%}.howto-id-avatar{width:3.4rem;height:3.4rem}.howto-search-window{left:9%;right:9%}.howto-search-lens{width:5rem;height:5rem}.howto-link-source,.howto-link-agent{width:27%}.howto-payment-card{left:9%;width:54%}.howto-payment-receipt{right:8%;width:34%}.howto-qc-frame{left:10%;right:10%}.howto-ship-package{width:27%}}@media(max-width:34.9375rem){.howto-control-counter{grid-template-columns:auto .8rem auto}.howto-step-selector{grid-auto-columns:minmax(15rem,88vw)}.howto-step-option-wave{display:none}.howto-step-option{grid-template-columns:2rem 2.25rem minmax(0,1fr)}.howto-viewport-art{min-height:19rem}.howto-viewport-art>.howto-step-world{min-height:18rem}.howto-viewport-art-caption{min-height:2.8rem;font-size:.56rem}.howto-world-icon{width:2.6rem;height:2.6rem;border-radius:.8rem}.howto-world-index{font-size:3.5rem}.howto-id-card{top:31%;height:42%;padding:.75rem}.howto-id-avatar{width:2.8rem;height:2.8rem;border-radius:.8rem}.howto-auth-key{right:7%;width:29%}.howto-search-window{top:25%;bottom:13%;gap:.4rem;padding:.55rem}.howto-search-lens{width:4rem;height:4rem;right:5%}.howto-link-source,.howto-link-agent{width:29%;border-radius:.8rem}.howto-link-tunnel{left:34%;right:34%}.howto-payment-card{top:32%;height:37%;padding:.75rem}.howto-payment-receipt{height:48%;padding:.65rem;gap:.45rem}.howto-payment-confirm{width:2.7rem;height:2.7rem}.howto-qc-product{width:42%}.howto-ship-package{width:30%}.howto-ship-destination{width:3.2rem;height:3.2rem}}@media(hover:none),(pointer:coarse){.howto-step-option:hover,.howto-checklist li:hover{transform:none}}[data-performance=low] :is(.howto-control-rail:before,.howto-step-viewport:before,.howto-step-viewport:after,.howto-viewport-sweep,.howto-world-grid,.howto-world-glow,.howto-auth-pulse,.howto-search-scan,.howto-link-packet,.howto-qc-scan,.howto-ship-trail){display:none}[data-visibility=hidden] :is(.howto-control-rail:before,.howto-step-viewport:before,.howto-step-viewport:after,.howto-viewport-sweep,.howto-step-option-wave i,.howto-world-glow,.howto-world-status i,.howto-id-card,.howto-auth-key i,.howto-auth-pulse,.howto-search-lens,.howto-search-scan,.howto-link-tunnel i,.howto-link-packet,.howto-payment-card,.howto-payment-confirm,.howto-qc-scan,.howto-qc-readout i,.howto-ship-package,.howto-ship-trail){animation-play-state:paused!important}[data-motion=reduced] :is(.howto-control-rail:before,.howto-step-viewport:before,.howto-step-viewport:after,.howto-viewport-sweep,.howto-step-option-wave i,.howto-control-rail-footer i,.howto-viewport-signal i,.howto-step-controls>span i,.howto-world-glow,.howto-world-status i,.howto-id-card,.howto-auth-key i,.howto-auth-pulse,.howto-search-lens,.howto-search-scan,.howto-link-tunnel i,.howto-link-packet,.howto-payment-card,.howto-payment-confirm,.howto-qc-scan,.howto-qc-readout i,.howto-ship-package,.howto-ship-trail){animation:none!important}@media(prefers-reduced-motion:reduce){:is(.howto-control-rail:before,.howto-step-viewport:before,.howto-step-viewport:after,.howto-viewport-sweep,.howto-step-option-wave i,.howto-control-rail-footer i,.howto-viewport-signal i,.howto-step-controls>span i,.howto-world-glow,.howto-world-status i,.howto-id-card,.howto-auth-key i,.howto-auth-pulse,.howto-search-lens,.howto-search-scan,.howto-link-tunnel i,.howto-link-packet,.howto-payment-card,.howto-payment-confirm,.howto-qc-scan,.howto-qc-readout i,.howto-ship-package,.howto-ship-trail){animation:none!important}}