/* ============ 设计师的 AI 方法课 · 包豪斯视觉系统 ============ */
@font-face{
  font-family:"NotoSC";
  src:url("font/NotoSansSC.woff2") format("woff2");
  font-weight:100 900;font-display:block;
}
:root{
  --paper:#EFE9DD;
  --paper2:#E5DDCD;
  --ink:#141414;
  --red:#D63A2F;
  --blue:#1D4FA0;
  --yellow:#F0B323;
  --grey:#8C867B;
  --e:cubic-bezier(.16,.84,.24,1);
  --font:"NotoSC","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
img{display:block}

/* ---------- 几何形 ---------- */
.g{position:absolute}
.g-circle{border-radius:50%}
.g-tri{clip-path:polygon(50% 0,100% 100%,0 100%)}
.g-half{border-radius:999px 999px 0 0}
.bg-red{background:var(--red)}
.bg-blue{background:var(--blue)}
.bg-yellow{background:var(--yellow)}
.bg-ink{background:var(--ink)}
.bg-paper{background:var(--paper)}
.c-red{color:var(--red)}
.c-blue{color:var(--blue)}
.c-yellow{color:var(--yellow)}
.c-grey{color:var(--grey)}

/* ---------- 前后对比滑块 ---------- */
.ba{position:relative;overflow:hidden;--p:50%;touch-action:none;cursor:ew-resize;background:#222;user-select:none;-webkit-user-select:none}
.ba-im{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.ba-top{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.ba-bar{position:absolute;top:0;bottom:0;left:var(--p);width:4px;margin-left:-2px;background:var(--paper);pointer-events:none}
.ba-bar i{position:absolute;top:50%;left:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px var(--paper)}
.ba-bar i::before,.ba-bar i::after{content:"";position:absolute;top:50%;margin-top:-8px;border:8px solid transparent}
.ba-bar i::before{left:7px;border-right:11px solid var(--paper)}
.ba-bar i::after{right:7px;border-left:11px solid var(--paper)}
.ba-tag{position:absolute;top:0;padding:8px 14px;font:700 17px/1 var(--font);letter-spacing:.12em;color:var(--paper);background:var(--ink);pointer-events:none}
.ba-tl{left:0}
.ba-tr{right:0;background:var(--red)}

/* ---------- 画中画对照卡 ---------- */
.duo{position:relative;margin:0}
.duo-main{position:relative;width:100%;overflow:hidden;background:#222}
.duo-main>img{width:100%;height:100%;object-fit:cover}
.duo-in{position:absolute;left:0;bottom:0;width:36%;border:5px solid var(--paper);border-left:0;border-bottom:0;background:var(--paper)}
.duo-in img{width:100%;height:auto;max-height:100%;object-fit:cover}
.duo-in b{position:absolute;left:0;top:-26px;font:700 12px/1 var(--font);letter-spacing:.14em;background:var(--ink);color:var(--paper);padding:7px 8px}
.duo figcaption{font:500 18px/1.3 var(--font);margin-top:10px;display:flex;gap:10px;align-items:center}
.duo figcaption::before{content:"";width:10px;height:10px;background:var(--red);flex:none}

/* ---------- 360 全景条 ---------- */
.pano{position:relative;overflow:hidden;background-repeat:repeat-x;background-size:auto 100%;cursor:grab;touch-action:pan-y}
.pano:active{cursor:grabbing}
.pano-tag{position:absolute;left:0;top:0;padding:10px 16px;font:700 17px/1 var(--font);letter-spacing:.12em;background:var(--blue);color:var(--paper)}
.pano-hint{position:absolute;right:16px;bottom:14px;font:500 16px/1 var(--font);color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.6)}

/* ---------- 标签 ---------- */
.tags{display:flex;flex-wrap:wrap;gap:10px}
.tags span{font:500 18px/1 var(--font);padding:9px 14px;border:2px solid currentColor}