#home-method .s-home-method__field{
  inset:0;
  height:auto;
  background-image:
    var(--scrim-head),
    var(--scrim-foot),
    radial-gradient(var(--line) var(--hair), transparent var(--hair));
  background-size:cover, cover, var(--tick) var(--tick);
  background-position:top left, bottom left, left top;
  background-repeat:no-repeat, no-repeat, repeat;
}

#home-method .s-home-method__brk{
  grid-template-columns:auto minmax(0,1fr);
  gap:var(--sp-5);
}

#home-method .rail__label{ bottom:var(--pad-ch-y); }

#home-method .s-home-method__head{
  margin-top:var(--sp-9);
  align-items:start;
}

#home-method .s-home-method__h{
  font-size:var(--fs-figure);
}

#home-method .s-home-method__note{
  padding-top:var(--sp-8);
}
#home-method .s-home-method__deck{
  max-width:var(--measure-display);
}
#home-method .s-home-method__note .body{
  margin-top:var(--sp-5);
  max-width:var(--measure-tight);
}

#home-method .s-home-method__cue{
  margin-top:var(--sp-9);
  color:var(--fg);
}

#home-method .s-home-method__plate{
  position:relative;
  isolation:isolate;
  margin-top:var(--sp-5);
  border-top:var(--hair) solid var(--line-strong);
  border-bottom:var(--hair) solid var(--line-strong);
  overflow:hidden;               

  
  background-image:linear-gradient(to right,
    transparent 0,
    var(--panel) var(--sp-6),
    var(--panel) calc(100% - var(--sp-6)),
    transparent 100%);
}

#home-method .s-home-method__plate::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:var(--z-base);
  pointer-events:none;
  background-image:radial-gradient(var(--line) var(--hair), transparent var(--hair));
  background-size:var(--baseline) var(--baseline);
  opacity:var(--state-quiet-alpha);
}

#home-method .s-home-method__plate{
  --ink-size:calc(var(--sp-12) * 2 + var(--sp-11));

  
  --ink-settle : var(--dur-3);                
  --ink-demo   : calc(var(--dur-4) * 2);      
  --ink-develop: calc(var(--dur-4) * 1.4);    
  --ink-idle   : calc(var(--dur-4) * 4);      
}

#home-method .s-home-method__plate.is-ink{ cursor:crosshair; }

#home-method .s-home-method__lamp{
  position:absolute;
  left:0;
  top:0;
  z-index:var(--z-field);
  width:var(--ink-size);
  height:var(--ink-size);
  margin-left:calc(var(--ink-size) / -2);
  margin-top:calc(var(--ink-size) / -2);
  pointer-events:none;
  opacity:0;
  
  background-image:
    radial-gradient(closest-side circle, var(--line), transparent 46%),
    radial-gradient(closest-side circle, var(--line), transparent 74%),
    radial-gradient(closest-side circle, var(--line), transparent 100%);
  
  transform:translate3d(var(--ink-x, 0px), var(--ink-y, 0px), 0) scale(var(--ink-scale, 1));
  
  transition:opacity var(--ink-develop) var(--ease-swap);
}

#home-method .s-home-method__plate.is-live .s-home-method__lamp{
  opacity:var(--state-quiet-alpha);
  transition:opacity var(--dur-2) var(--ease-out);
  will-change:transform;
}

#home-method .s-home-method__plate.is-rest .s-home-method__lamp{
  --ink-scale:.62;
  opacity:calc(var(--state-quiet-alpha) * .85);
  transition:
    opacity   var(--ink-develop) var(--ease-swap),
    transform var(--ink-develop) var(--ease-swap);
}

#home-method .s-home-method__set{
  position:relative;
  z-index:var(--z-content);
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
}

#home-method .s-home-method__sig{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:var(--sp-8);
  min-height:calc(var(--sp-12) + var(--sp-9));
  padding:var(--sp-6) var(--sp-5) var(--sp-7);
}
#home-method .s-home-method__sig + .s-home-method__sig{
  border-left:var(--hair) solid var(--line);
}
#home-method .s-home-method__sig:first-child{ padding-left:0; }
#home-method .s-home-method__sig:last-child { padding-right:0; }

#home-method .s-home-method__idx{
  display:block;
  color:var(--fg-mut);
}

#home-method .s-home-method__name{
  display:block;
  color:var(--fg);
  text-wrap:pretty;
}

#home-method .s-home-method__name::after{
  content:"";
  display:block;
  width:100%;
  height:var(--hair);
  margin-top:var(--sp-3);
  background:var(--line);
  transform:scaleX(0);
  transform-origin:left center;
}

#home-method .s-home-method__plate.is-ink .s-home-method__name{
  color:var(--line);
}

#home-method .s-home-method__plate.is-ink .s-home-method__sig.is-lit .s-home-method__name{
  color:var(--fg);
  transition:color var(--ink-develop) var(--ease-swap);
}

#home-method .s-home-method__plate.is-ink .s-home-method__sig.is-lit .s-home-method__idx{
  color:var(--fg);
  transition:color var(--ink-develop) var(--ease-swap);
}

#home-method .s-home-method__plate.is-ink .s-home-method__name::after{
  transform:scaleX(1);
}
#home-method .s-home-method__plate.is-ink .s-home-method__sig.is-lit .s-home-method__name::after{
  transform:scaleX(0);
  transition:transform var(--ink-develop) var(--ease-rule);
}

#home-method .s-home-method__plate:focus-visible{
  outline-offset:calc(var(--state-focus-offset) * -1);
}

@media (prefers-reduced-motion: reduce){
  #home-method .s-home-method__plate.is-ink .s-home-method__name,
  #home-method .s-home-method__name{
    color:var(--fg) !important;
    transition:none !important;
  }
  #home-method .s-home-method__plate.is-ink .s-home-method__idx,
  #home-method .s-home-method__idx{ transition:none !important; }
  
  #home-method .s-home-method__lamp{ display:none; }
  #home-method .s-home-method__plate.is-ink{ cursor:auto; }
  #home-method .s-home-method__plate.is-ink .s-home-method__name::after,
  #home-method .s-home-method__name::after{
    transform:scaleX(0) !important;
    transition:none !important;
  }
}

@media print{
  #home-method .s-home-method__plate.is-ink .s-home-method__name,
  #home-method .s-home-method__name{ color:var(--fg) !important; }
  #home-method .s-home-method__lamp{ display:none; }
  #home-method .s-home-method__plate.is-ink .s-home-method__name::after,
  #home-method .s-home-method__name::after{ transform:scaleX(0) !important; }
}

@media (forced-colors: active){
  #home-method .s-home-method__plate.is-ink .s-home-method__name,
  #home-method .s-home-method__name,
  #home-method .s-home-method__plate.is-ink .s-home-method__idx,
  #home-method .s-home-method__idx{ color:CanvasText; forced-color-adjust:auto; }
  #home-method .s-home-method__lamp,
  #home-method .s-home-method__plate::before,
  #home-method .s-home-method__name::after{ display:none; }
}

#home-method .s-home-method__more{
  margin-top:var(--sp-7);
}

@media (max-width: 1100px){
  #home-method .s-home-method__note{ padding-top:0; }
  #home-method .s-home-method__cue{ margin-top:var(--sp-9); }
  #home-method .s-home-method__set{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
  #home-method .s-home-method__sig{
    min-height:var(--sp-11);
    padding:var(--sp-5) var(--sp-5) var(--sp-6);
    border-left:0;
  }
  #home-method .s-home-method__sig:nth-child(even){
    border-left:var(--hair) solid var(--line);
    padding-right:0;
  }
  #home-method .s-home-method__sig:nth-child(odd){ padding-left:0; }
  #home-method .s-home-method__sig:nth-child(n+3){
    border-top:var(--hair) solid var(--line);
  }
}

@media (max-width: 760px){
  #home-method .s-home-method__head{ margin-top:var(--sp-7); }
  #home-method .s-home-method__cue{ margin-top:var(--sp-7); }

  #home-method .s-home-method__plate{
    --ink-size:calc(var(--sp-12) + var(--sp-10));
    margin-top:var(--sp-6);
  }
  #home-method .s-home-method__set{
    grid-template-columns:minmax(0,1fr);
  }
  #home-method .s-home-method__sig,
  #home-method .s-home-method__sig:nth-child(even),
  #home-method .s-home-method__sig:nth-child(odd){
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    gap:var(--sp-5);
    align-items:baseline;
    min-height:0;
    padding:var(--sp-6) 0;
    border-left:0;
  }
  #home-method .s-home-method__sig + .s-home-method__sig{
    border-top:var(--hair) solid var(--line);
  }
  #home-method .s-home-method__idx{ padding-top:var(--sp-1); }
}