/*
 * 墨溟 · workshop — 工坊
 * 每件工具一张样张：左边是插图，右边是名字、说明、下载与校验。
 */

.shop { padding: calc(var(--mast-h) + clamp(56px, 10vh, 120px)) var(--margin) clamp(100px, 14vh, 180px); }

.shop__head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: end;
  padding-bottom: clamp(48px, 8vh, 96px);
  border-bottom: 1px solid var(--ink);
}
.shop__label { grid-column: 1 / -1; margin-bottom: clamp(20px, 3vh, 36px); }
.shop__title {
  grid-column: 1 / span 6;
  font-size: clamp(110px, 17vw, 280px);
  font-weight: 900;
  line-height: .88;
  letter-spacing: .02em;
}
.shop__intro { grid-column: 8 / span 5; padding-bottom: .4em; }
.shop__lede { font-size: var(--t-lead); line-height: 1.75; letter-spacing: .03em; }
.shop__note { margin-top: 16px; font-size: 14px; line-height: 1.85; color: var(--ink-2); }
.shop__empty { padding: 80px 0; font-size: var(--t-lead); color: var(--ink-2); }

/* ------------------------------------------------------------------ 样张 */

.tool {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  padding: clamp(56px, 9vh, 112px) 0;
  border-bottom: 1px solid var(--hair-2);
}
.tool__art { grid-column: 1 / span 6; margin: 0; align-self: start; position: sticky; top: calc(var(--mast-h) + 32px); }
.tool__body { grid-column: 8 / span 5; }

.tool__no { margin-bottom: 18px; }
.tool__name {
  font-size: clamp(40px, 4.4vw, 72px);
  line-height: 1;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
.tool__tagline { margin-top: 18px; font-size: var(--t-h3); font-weight: 600; letter-spacing: .04em; }
.tool__desc { margin-top: 14px; font-size: 16.5px; line-height: 1.95; color: var(--ink-2); max-width: 30em; }

.tool__specs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, auto));
  justify-content: start;
  gap: 8px clamp(28px, 3vw, 52px);
  margin-top: 30px;
  padding: 18px 0;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.tool__specs dd { margin-top: 6px; font-size: 16px; letter-spacing: .04em; }

.tool__dl { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.tool__hashes { display: grid; gap: 14px; margin-top: 30px; }
.hash dd { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.hash code { font-size: 13px; letter-spacing: .02em; color: var(--ink-2); }
.hash__copy {
  padding: 3px 10px;
  border: 1px solid var(--hair-2);
  border-radius: 999px;
  background: none;
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--ink-2);
  transition: color .3s, border-color .3s, background-color .3s;
}
.hash__copy:hover { color: var(--ink); border-color: var(--ink); }
.hash__copy.is-done { color: var(--seal); border-color: var(--seal); }
.tool__src { display: inline-flex; gap: 8px; margin-top: 30px; font-size: 15px; letter-spacing: .06em; }

/* ------------------------------------------------------------------ 键盘 */

.tool__art--keys {
  padding: clamp(24px, 3vw, 44px);
  border: 1px solid var(--hair-2);
  border-radius: 18px;
  background: var(--paper-2);
}
.keys { width: 100%; height: auto; overflow: visible; }
.keys .k { transition: transform .18s var(--ease); }
.keys .k-cap { fill: var(--paper); stroke: var(--hair-2); stroke-width: 1; transition: fill .25s, stroke .25s; }
.keys .k-label { fill: var(--ink-3); font-family: var(--mono); font-size: 12px; letter-spacing: .04em; transition: fill .25s; }
.keys .is-combo .k-label { fill: var(--ink); }
.keys .k.is-win .k-cap { fill: var(--ink); stroke: var(--ink); }
.keys .k-logo { fill: var(--paper); }
.keys .k.is-down { transform: translateY(3px); }
.keys .k.is-down .k-cap { stroke: var(--ink); }
.keys .k.is-win.is-down .k-cap { fill: var(--seal); stroke: var(--seal); }
.keys .k-strike {
  fill: none;
  stroke: var(--seal);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset .35s var(--ease);
}
.keys .k.is-struck .k-strike { stroke-dashoffset: 0; }
.keys .k.is-struck .k-cap { fill: color-mix(in srgb, var(--seal) 9%, var(--paper)); stroke: var(--seal); }

.keys__cap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  margin-top: clamp(20px, 2.6vw, 32px);
  padding-top: 16px;
  border-top: 1px solid var(--hair);
}
.keys__combo { font-size: 13px; letter-spacing: .08em; color: var(--ink); }
.tool__art--keys.is-blocked .keys__combo { color: var(--seal); }
.keys__what { font-size: 14px; letter-spacing: .06em; color: var(--ink-2); }

.tool__art--letter {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--hair-2);
  border-radius: 18px;
  background: var(--paper-2);
}
.tool__art--letter span { font-family: var(--latin); font-style: italic; font-size: clamp(120px, 14vw, 220px); line-height: 1; }

/* ------------------------------------------------------------------ BtBeam */

.tool__art--beam {
  padding: clamp(24px, 3vw, 44px);
  border: 1px solid var(--hair-2);
  border-radius: 18px;
  background: var(--paper-2);
}

.beam { width: 100%; height: auto; overflow: visible; display: block; }

/* 设备：细线描边，纸面填充 */
.beam .bm-dev {
  fill: var(--paper);
  stroke: var(--hair-2);
  stroke-width: 1.3;
  transition: stroke .34s var(--ease);
}
.beam .bm-screen {
  fill: color-mix(in srgb, var(--ink) 5%, var(--paper));
  stroke: var(--hair);
  stroke-width: .9;
}
.beam .bm-notch, .beam .bm-home { fill: var(--hair-2); }
.beam .bm-touch { fill: var(--hair-2); }
.beam .bm-lines rect { fill: var(--hair-2); }

/* 笔记本里的进度条 */
.beam .bm-bar-bg { fill: var(--hair); }
.beam .bm-bar {
  fill: var(--ink-3);
  transition: width .28s linear, fill .3s var(--ease);
}

/* 手机收纳格 */
.beam .bm-slot rect:first-child {
  fill: var(--paper);
  stroke: var(--hair);
  stroke-width: 1;
  transition: fill .3s var(--ease), stroke .3s var(--ease);
}
.beam .bm-slot-ico {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 1.2;
  transition: stroke .3s var(--ease);
}
.beam .bm-slot-line { fill: var(--hair-2); transition: fill .3s var(--ease); }
.beam .bm-slot.is-on rect:first-child {
  fill: color-mix(in srgb, var(--seal) 12%, var(--paper));
  stroke: var(--seal);
}
.beam .bm-slot.is-on .bm-slot-ico { stroke: var(--seal); }
.beam .bm-slot.is-on .bm-slot-line { fill: color-mix(in srgb, var(--seal) 45%, var(--hair-2)); }

/* 链路：虚线=蓝牙（常驻），实线=热点（点亮） */
.beam .bm-wire { fill: none; stroke-linecap: round; }
.beam .bm-wire--bt {
  stroke: var(--hair-2);
  stroke-width: 1.5;
  stroke-dasharray: 3 7;
}
.beam .bm-wire--hs {
  stroke: var(--seal);
  stroke-width: 2;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset .45s var(--ease);
}

.beam .bm-node {
  fill: var(--paper);
  stroke: var(--ink-3);
  stroke-width: 1.3;
  transition: fill .3s var(--ease), stroke .3s var(--ease);
}

/* 传输中的文件块 */
.beam .bm-packet { will-change: transform; }
.beam .bm-packet rect:first-child {
  fill: var(--paper);
  stroke: var(--ink-2);
  stroke-width: 1.3;
  transition: fill .3s var(--ease), stroke .3s var(--ease);
}
.beam .bm-packet-fold { fill: var(--hair-2); transition: fill .3s var(--ease); }
.beam .bm-packet-line { fill: var(--hair-2); transition: fill .3s var(--ease); }

/* 热点阶段整体点亮 */
.tool__art--beam.is-fast .bm-wire--bt { stroke: color-mix(in srgb, var(--seal) 28%, var(--hair-2)); }
.tool__art--beam.is-fast .bm-packet rect:first-child {
  fill: color-mix(in srgb, var(--seal) 9%, var(--paper));
  stroke: var(--seal);
}
.tool__art--beam.is-fast .bm-packet-fold { fill: color-mix(in srgb, var(--seal) 55%, var(--hair-2)); }
.tool__art--beam.is-fast .bm-packet-line { fill: color-mix(in srgb, var(--seal) 40%, var(--hair-2)); }
.tool__art--beam.is-fast .bm-node { fill: var(--seal); stroke: var(--seal); }
.tool__art--beam.is-fast .bm-dev { stroke: var(--ink-3); }
.tool__art--beam.is-fast .bm-bar { fill: var(--seal); }

/* 底部说明 */
.beam__cap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  margin-top: clamp(18px, 2.2vw, 28px);
  padding-top: 14px;
  border-top: 1px solid var(--hair);
}
.beam__chan { font-size: 13px; letter-spacing: .08em; color: var(--ink); transition: color .3s; }
.tool__art--beam.is-fast .beam__chan { color: var(--seal); }
.beam__what { font-size: 14px; letter-spacing: .06em; color: var(--ink-2); }
.beam__rate { margin-left: auto; font-size: 13px; letter-spacing: .06em; color: var(--ink-3); transition: color .3s; }
.tool__art--beam.is-fast .beam__rate { color: var(--seal); }

/* ------------------------------------------------------------------ 结尾 */

.shop__more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 40px;
  margin-top: clamp(64px, 10vh, 120px);
}
.shop__more-text { font-size: var(--t-h2); letter-spacing: .04em; }

@media (max-width: 960px) {
  .shop__title, .shop__intro { grid-column: 1 / -1; }
  .shop__intro { margin-top: 28px; }
  .tool__art, .tool__body { grid-column: 1 / -1; }
  .tool__art { position: static; margin-bottom: 40px; }
}
@media (max-width: 560px) {
  .tool__specs { grid-template-columns: repeat(2, minmax(0, auto)); }
  .tool__dl .btn { flex: 1 1 100%; }
  .hash code { font-size: 12px; }
}