/* ---- 可交互演示：在网页里把野菜桌面玩一遍 ------------------------------
   窗口里是真实截图（不能真导航、真播歌，页面上有说明）；
   Dock 热区、抽屉、菜园、小横条、工具条都是代码画的 —— 画出来才点得动，
   而且它们本来就是野菜自己的界面，不算伪造别人的东西。 */

.demo { margin: 64px 0 0 }
.demo .lede { margin-bottom: 22px }

/* 平板外框：纯 CSS，不用图片 */
.tab {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  border-radius: 20px;
  padding: 10px;
  background: linear-gradient(160deg, #2A302A, #141814);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .28), 0 2px 0 rgba(255, 255, 255, .06) inset;
}
@media (prefers-color-scheme: dark) { .tab { box-shadow: 0 18px 50px rgba(0, 0, 0, .55) } }

/* 截图全部是中兴 W200DS 实机 1920×1200（2026-09-30 起；以前是小米平板 1940×1293）。
   下面所有百分比都按这个尺寸的像素换算 */
.screen {
  position: relative;
  aspect-ratio: 1920 / 1200;
  border-radius: 11px;
  overflow: hidden;
  background: #0E120E;
  /* 触摸设备上长按会弹系统菜单，挡住我们自己的长按 */
  -webkit-touch-callout: none;
  user-select: none;
}
.screen img.shot {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
/* 切图时淡一下，别硬切 */
.screen img.shot { transition: opacity .18s }
.screen.swapping img.shot { opacity: .35 }

/* ---- 台前调度 ----
   位置按截图像素换算成百分比：主屏 (121,84) 1423×1107，小窗 x 1550 起 360×282，y 209 / 497 / 785 */
.screen.staged img.shot { display: none }
.stage { position: absolute; inset: 0; display: none }
.screen.staged .stage { display: block }
.stage img { display: block; width: 100%; height: 100% }
.stage .sbase { position: absolute; inset: 0; object-fit: cover }
/* 位置 = shots/make.ps1 的裁剪框 ÷ 1920×1200（1.7.9 起侧栏和主屏上下对齐：主屏 120,84 1342×1107；小窗 x1469 441×364，y 85/455/825） */
.stage .smain {
  position: absolute; left: 6.25%; top: 7%; width: 69.8958%; height: 92.25%;
  transition: opacity .18s, transform .22s cubic-bezier(.2, .7, .3, 1);
}
.stage .sthumb {
  position: absolute; left: 76.5104%; width: 22.9688%; height: 30.3333%;
  border: 0; padding: 0; margin: 0; background: none; cursor: pointer;
  border-radius: 8px; overflow: hidden;
  transition: opacity .18s, transform .18s;
}
.stage .sthumb[data-i="1"] { top: 7.0833% }
.stage .sthumb[data-i="2"] { top: 37.9167% }
.stage .sthumb[data-i="3"] { top: 68.75% }
.stage .sthumb:hover { transform: translateX(-3px) }
.stage .sthumb:focus-visible { outline: 3px solid var(--leaf); outline-offset: -3px }
/* 换位：两边一起淡一下，新图就位再亮 */
.stage.swap .smain, .stage .sthumb.swap { opacity: .3 }
.stage.swap .smain { transform: scale(.985) }
/* 每种布局里第一个窗口（地图）顶上那根小横条的位置不一样：按截图量的中心点 */
.screen[data-layout="2col"] .grip, .screen[data-layout="2col"] .wtoolbar { left: 37.14% }
.screen[data-layout="3col"] .grip, .screen[data-layout="3col"] .wtoolbar { left: 21.67% }
.screen[data-layout="4grid"] .grip, .screen[data-layout="4grid"] .wtoolbar { left: 29.43% }
.screen[data-layout="full"] .grip, .screen[data-layout="full"] .wtoolbar { left: 52.81% }
.screen[data-layout="stage"] .grip, .screen[data-layout="stage"] .wtoolbar { left: 43.28% }

/* ---- 叶子热区：盖在截图里那片叶子上 ---- */
/* 截图里叶子在 Dock 最下面，中心 (61,1128) */
.leafhit {
  position: absolute;
  left: 1.1%; bottom: 2.5%;
  width: 4.2%; aspect-ratio: 1;
  border: 0; padding: 0; margin: 0;
  background: none; cursor: pointer;
  border-radius: 50%;
}
.leafhit::after {
  content: ""; position: absolute; inset: -14%;
  border-radius: 50%;
  border: 2px solid var(--leaf);
  opacity: 0; transform: scale(.7);
  transition: opacity .18s, transform .18s;
}
.leafhit:hover::after, .leafhit:focus-visible::after { opacity: .9; transform: scale(1) }
/* 长按进度环：按住时描边一圈一圈补满。
   SVG 是替换元素，只写 inset 撑不开（会按左上角对齐、用自己的默认尺寸），宽高要写明；
   首页全局有 img,svg{max-width:100%}，会把宽度压回按钮那么宽，圆圈就偏到左边去了，这里要放开 */
.leafhit .ring {
  position: absolute; left: -22%; top: -22%; width: 144%; height: 144%; max-width: none;
  transform: rotate(-90deg);
  opacity: 0; transition: opacity .12s;
}
.leafhit.holding .ring { opacity: 1 }
.leafhit .ring circle {
  fill: none; stroke: var(--leaf); stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 283; stroke-dashoffset: 283;
}
.leafhit.holding .ring circle { animation: fill .5s linear forwards }
@keyframes fill { to { stroke-dashoffset: 0 } }

/* ---- 萌伴（2.1.7，S4-A）：三栏截图右边一格是萌伴组件，萌伴大约在 (1400–1850, 700–1180) ----
   只在三栏里出现；点一下头顶冒一句，样子照真机的说话气泡（白底圆角、下面一个小尖） */
.pethit {
  position: absolute; left: 72.9%; top: 58.3%; width: 23.4%; height: 39.5%;
  border: 0; padding: 0; margin: 0; background: none; cursor: pointer; border-radius: 28px;
}
.pethit:focus-visible { outline: 3px solid var(--leaf); outline-offset: -3px }
.screen:not([data-layout="3col"]) .pethit, .screen:not([data-layout="3col"]) .petsay { display: none }
.petsay {
  position: absolute; left: 84.6%; top: 58%;
  transform: translate(-50%, -100%) scale(.9); transform-origin: 50% 100%;
  max-width: 30%; width: max-content; text-wrap: balance;
  background: #fff; color: #1A2118;
  font-size: clamp(10px, 1.45vw, 15px); line-height: 1.45;
  padding: .55em 1em; border-radius: 1.3em;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
  pointer-events: none; opacity: 0;
  transition: opacity .18s, transform .18s;
}
.petsay::after {
  content: ""; position: absolute; left: 50%; bottom: -6px; margin-left: -7px;
  border: 7px solid transparent; border-top-color: #fff; border-bottom: 0;
}
.petsay.on { opacity: 1; transform: translate(-50%, -100%) scale(1) }

/* ---- 提示气泡 ---- */
.tip {
  position: absolute; left: 7.5%; bottom: 3%;
  background: rgba(20, 26, 20, .92); color: #EAF0E6;
  font-size: 13px; line-height: 1.5;
  padding: 7px 12px; border-radius: 10px;
  pointer-events: none; white-space: nowrap;
  opacity: 0; transform: translateY(4px);
  transition: opacity .2s, transform .2s;
}
.tip.on { opacity: 1; transform: translateY(0) }
.tip b { color: #9CD98A }

/* ---- 抽屉：从叶子那个点圆形展开，和真机一个做法 ---- */
.drawer {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  backdrop-filter: blur(14px);
  padding: 4% 4.5%;
  display: none; flex-direction: column;
  clip-path: circle(0% at 3.2% 94%);
}
.drawer.on { display: flex; animation: reveal .36s cubic-bezier(.2, .7, .3, 1) forwards }
@keyframes reveal { to { clip-path: circle(140% at 3.2% 94%) } }
.drawer .dhead { display: flex; align-items: center; gap: 12px; margin-bottom: 3% }
.drawer .dtitle { font-weight: 600; font-size: clamp(13px, 1.9vw, 19px) }
.drawer .dsearch {
  flex: 1; background: var(--raise); border: 1px solid var(--line);
  border-radius: 999px; padding: 1.1% 3%;
  color: var(--muted); font-size: clamp(11px, 1.5vw, 15px);
}
.drawer .dclose {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: 999px; cursor: pointer;
  padding: 1% 3%; font-size: clamp(11px, 1.5vw, 14px);
}
/* 5 列 + 上下居中：真机上应用铺满整屏，演示里只放十来个，
   用 6 列小图标会显得下半屏全是空的，像没做完 */
.dgrid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 4% 2.5%; flex: 1; align-content: center; padding-bottom: 3%;
}
.dcell { display: flex; flex-direction: column; align-items: center; gap: 9%; text-align: center }
.dcell .ic {
  width: 74%; aspect-ratio: 1; border-radius: 26%;
  background: var(--raise); border: 1px solid var(--line);
  display: grid; place-items: center;
}
.dcell .ic svg { width: 52%; height: 52%; fill: none; stroke: var(--muted); stroke-width: 1.8 }
.dcell.first .ic { background: var(--leaf-soft); border-color: var(--leaf) }
.dcell.first .ic svg { stroke: var(--leaf) }
.dcell span { font-size: clamp(9px, 1.25vw, 13px); color: var(--muted); line-height: 1.35 }
.dcell.first span { color: var(--leaf); font-weight: 600 }

/* ---- 菜园：实机截图（大时钟、天气、歌词） ---- */
.garden { position: absolute; inset: 0; display: none }
.garden img { display: block; width: 100%; height: 100% }
.garden.on { display: block; animation: gfade .3s ease forwards }
@keyframes gfade { from { opacity: 0 } to { opacity: 1 } }

/* ---- 窗口顶部小横条与工具条 ---- */
/* 截图里窗口顶上本来就有一根小横条（y≈113），热区盖在它上面、比它大一圈好点中 */
.grip {
  position: absolute; top: 8.2%; left: 50%; transform: translateX(-50%);
  width: 5.5%; height: 2.6%; opacity: 0;
  background: transparent; border: 2px solid var(--leaf);
  border-radius: 99px; cursor: pointer; transition: opacity .15s;
}
.grip:hover, .grip:focus-visible { opacity: .9 }
/* 工具条出在小横条那个位置，和真机一样 */
.wtoolbar {
  position: absolute; top: 7.6%; left: 50%; transform: translateX(-50%) translateY(-6px);
  display: none; align-items: center; gap: 2%;
  background: color-mix(in srgb, var(--surface) 95%, transparent);
  border: 1px solid var(--line); border-radius: 999px;
  padding: .8% 1.4%;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  opacity: 0;
}
.wtoolbar.on { display: flex; animation: tbin .18s ease forwards }
@keyframes tbin { to { opacity: 1; transform: translateX(-50%) translateY(0) } }
.wtoolbar .wname { font-size: clamp(10px, 1.4vw, 14px); font-weight: 600; padding: 0 4px; white-space: nowrap }
.wtoolbar button {
  border: 0; background: none; cursor: pointer; padding: 3px;
  display: grid; place-items: center; border-radius: 50%;
}
.wtoolbar button:hover { background: var(--raise) }
.wtoolbar button svg { width: clamp(14px, 2vw, 21px); height: clamp(14px, 2vw, 21px); fill: none; stroke: var(--ink); stroke-width: 1.9 }
.wtoolbar button.spin svg { animation: spin .42s ease }
@keyframes spin { to { transform: rotate(360deg) } }

/* ---- 下面的操作条 ---- */
.demobar {
  max-width: 980px; margin: 18px auto 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.demobar .lbl { color: var(--muted); font-size: 14px; margin-right: 2px }
.demobar button {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: 999px; padding: 7px 15px; font-size: 14px; cursor: pointer;
}
.demobar button:hover { border-color: var(--leaf); color: var(--leaf) }
.demobar button[aria-pressed="true"] { background: var(--leaf); color: #fff; border-color: var(--leaf) }
.demonote { max-width: 980px; margin: 12px auto 0; color: var(--muted); font-size: 13.5px; line-height: 1.7 }

@media (max-width: 620px) {
  .dgrid { grid-template-columns: repeat(4, 1fr); gap: 5% 3% }
  .demobar { gap: 8px }
  .demobar button { padding: 6px 12px; font-size: 13px }
}
@media (prefers-reduced-motion: reduce) {
  .drawer.on, .garden.on, .wtoolbar.on { animation: none; opacity: 1; clip-path: none }
  .leafhit.holding .ring circle { animation: none }
  .stage .smain, .stage .sthumb { transition: none }
  .stage .sthumb:hover { transform: none }
}