/* Fybr · "Pull a thread": the mark as a working diagram. Shared by the homepage and Development. */

/* ========================= PULL A THREAD ========================= */
.pull{position:relative;padding:clamp(96px,12vw,170px) 0 clamp(80px,9vw,130px);background:var(--ground);border-top:1px solid var(--line-soft)}
.pull-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:clamp(32px,5vw,80px);align-items:center}
.pull-copy h2{font-size:clamp(2.4rem,4.4vw,4.2rem);line-height:1;letter-spacing:-.03em;margin-bottom:26px}
.pull-copy p{color:var(--ink-mid);max-width:25rem;line-height:1.6}
.pull-hint{margin-top:22px;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal)!important}
.pull-stage{position:relative;aspect-ratio:1.75;min-height:400px;border-radius:6px;background:radial-gradient(90% 90% at 40% 45%,#111a23,#0a0f14 72%);border:1px solid var(--line-soft);touch-action:pan-y;overflow:hidden}
.pull-canvas{position:absolute;inset:0;width:100%;height:100%;cursor:default}
.pull-canvas.is-grab{cursor:grab}
.pull-canvas.is-dragging{cursor:grabbing}
.pull-tag{position:absolute;left:0;top:0;display:grid;gap:3px;margin:0;pointer-events:none;white-space:nowrap;will-change:transform}
.pull-tag span{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mid)}
.pull-tag b{font-family:var(--serif);font-weight:400;font-size:1.2rem;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums}
.owner-view{position:absolute;right:4.5%;top:50%;transform:translateY(-50%);width:min(262px,36%);padding:20px 20px 16px;background:rgba(10,14,18,.8);border:1px solid rgba(234,240,246,.14);border-radius:4px;transition:border-color .5s var(--ease-out)}
.owner-view__title{color:var(--ink);font-size:.72rem;margin-bottom:14px}
.owner-view dl{margin:0;display:grid;gap:13px}
.owner-view dt{font-size:.76rem;color:var(--ink-mid);margin-bottom:2px}
.owner-view dd{margin:0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.owner-view dd span{font-family:var(--serif);font-size:1.45rem;letter-spacing:-.015em;font-variant-numeric:tabular-nums;transition:color .6s var(--ease-out)}
.owner-view dd small{font-family:var(--mono);font-size:.68rem;font-variant-numeric:tabular-nums;color:var(--ink-low-text)}
.owner-view dd small.up{color:#8FC4A1}
.owner-view dd small.down{color:#D99A8C}
.owner-view.is-hit{border-color:rgba(232,184,115,.55)}
.owner-view.is-hit dd span{color:var(--brass)}
.pull-controls{display:grid;grid-template-columns:1fr 1fr;gap:18px 40px;margin-top:-12px}
.pull-grid .pull-controls{grid-column:2}
.pull-input{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:4px 16px}
.pull-input label{color:var(--ink-mid);font-size:.72rem}
.pull-input output{font-family:var(--mono);font-size:.74rem;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.pull-input input{grid-column:1/-1;width:100%;margin:4px 0 0;accent-color:var(--brass)}
.pull-note{grid-column:1/-1;font-size:.82rem;color:var(--ink-low-text);max-width:60rem;line-height:1.6}
.pull-note .text-link{font-size:.82rem;margin-left:6px;color:var(--ink-mid)}

/* Range sliders, themed */
input[type=range]{-webkit-appearance:none;appearance:none;height:22px;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:2px;background:linear-gradient(90deg,rgba(232,184,115,.75),rgba(95,168,184,.55))}
input[type=range]::-moz-range-track{height:2px;background:rgba(232,184,115,.6)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--brass);border:3px solid #0A0E12;box-shadow:0 0 0 1px var(--brass);margin-top:-7px}
input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--brass);border:3px solid #0A0E12}


@media (max-width:1080px){
  .pull-grid{grid-template-columns:1fr}
  .pull-grid .pull-controls{grid-column:1}
}
@media (max-width:760px){
  .pull-stage{aspect-ratio:auto;height:560px;min-height:0}
  .owner-view{left:5%;right:5%;top:auto;bottom:5%;transform:none;width:auto}
  .pull-controls{grid-template-columns:1fr;margin-top:0}
}