.wl{ margin-top:44px; display:grid; grid-template-columns:minmax(260px,340px) 1fr;
  border:1px solid var(--rule); background:var(--rule); gap:1px; }
.wl__list{ background:var(--bg-0); display:flex; flex-direction:column; }
.wl__item{ -webkit-appearance:none; appearance:none; text-align:left; cursor:pointer;
  flex:1 1 0;
  background:var(--bg-0); border:0; border-bottom:1px solid var(--rule);
  padding:15px 18px; display:flex; align-items:center; gap:12px;
  font-family:var(--font-mono); color:var(--fg-1); position:relative; overflow:hidden;
  transition:background .18s ease, color .18s ease; }
.wl__item:last-child{ border-bottom:0; }
.wl__item:hover{ background:var(--bg-1); }
.wl__item.is-active{ background:var(--accent-tint); color:var(--fg-0); }
.wl__item.is-active::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--accent); }
.wl__n{ font-size:11px; letter-spacing:0.14em; color:var(--fg-3); min-width:22px; }
.wl__item.is-active .wl__n{ color:var(--accent); }
.wl__name{ font-size:13.5px; }
.wl__bar{ position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--accent); }
.wl__item.is-active .wl__bar{ animation:wlprog 4500ms linear forwards; }
.wl.is-paused .wl__item.is-active .wl__bar{ animation-play-state:paused; }
@keyframes wlprog{ from{ width:0; } to{ width:100%; } }
.wl__detail{ background:var(--bg-0); padding:34px 36px;
  display:grid; grid-template-columns:1fr minmax(300px,380px); gap:32px; align-items:stretch; }
.wl__text{ display:grid; grid-template-columns:minmax(0,1fr); min-width:0; }
.wl__textcard{ grid-area:1/1; display:flex; flex-direction:column; gap:14px; min-width:0; }
.wl__meta{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); }
.wl__h{ font-size:26px; }
.wl__desc{ color:var(--fg-2); font-size:14px; line-height:1.6; margin:0; max-width:52ch; }
.wl__use{ margin-top:auto; padding-top:18px; }
.wl__use-k{ font-family:var(--font-mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); margin-bottom:11px; }
.wl__use ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px; }
.wl__use li{ position:relative; padding-left:20px; font-family:var(--font-mono); font-size:12.5px; line-height:1.5; color:var(--fg-1); }
.wl__use li::before{ content:"→"; position:absolute; left:0; color:var(--accent); }
.wl__risk{ margin-top:6px; font-family:var(--font-mono); font-size:12.5px; color:var(--fg-1); line-height:1.5; }
.wl__risk .k{ display:block; color:var(--bad); text-transform:uppercase; letter-spacing:0.1em; font-size:10px; margin-bottom:6px; }
.wl__rt{ color:var(--fg-0); font-weight:500; }
.wl__viz{ position:relative; overflow:hidden; min-height:230px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:24px;
  border:1px solid var(--rule);
  background:radial-gradient(var(--grid-dot) 1px, transparent 1px) 0 0 / 18px 18px, var(--bg-1); }
.wl__viz::before, .wl__viz::after{ content:""; position:absolute; width:10px; height:10px; border:1px solid var(--rule-strong); opacity:.6; }
.wl__viz::before{ top:8px; left:8px; border-right:none; border-bottom:none; }
.wl__viz::after{ bottom:8px; right:8px; border-left:none; border-top:none; }
.wl__viz .viz{ width:100%; }
.wl__gpu{ width:100%; max-width:380px; border-top:1px solid var(--rule); padding-top:12px; }
@media (prefers-reduced-motion:reduce){ .wl__item.is-active .wl__bar{ animation:none; } }
@media (max-width:920px){ .wl__detail{ grid-template-columns:1fr; } .wl__viz{ order:-1; } .wl__risk{ margin-top:2px; } }
@media (max-width:760px){ .wl{ grid-template-columns:1fr; } .wl__detail{ padding:26px 22px; } }

.hw{ margin-top:44px; border:1px solid var(--rule); background:var(--rule); display:grid; gap:1px; }
.hw__stage{ background:var(--bg-1);
  background-image:radial-gradient(var(--grid-dot) 1px, transparent 1px); background-size:18px 18px;
  padding:32px 26px; }
.hw__svg{ width:100%; max-width:780px; margin:0 auto; display:block; }
.hw__steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--rule); }
.hw__step{ background:var(--bg-0); padding:22px 22px; display:flex; flex-direction:column; gap:8px;
  border-top:2px solid var(--rule); transition:background .3s ease, border-color .3s ease; }
.hw__step.is-on{ background:var(--accent-tint); border-top-color:var(--accent); }
.hw__sn{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.14em; color:var(--fg-3); transition:color .3s ease; }
.hw__step.is-on .hw__sn{ color:var(--accent); }
.hw__sh{ font-size:16px; margin:0; }
.hw__sp{ color:var(--fg-2); font-size:13px; line-height:1.5; margin:0; }
@media (max-width:820px){ .hw__steps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:470px){ .hw__steps{ grid-template-columns:1fr; } }