/* Motion Hub 实验台版式 · Acid 风格（配色变量在 effects.css 的 base 段）
   暖灰底上放两块大圆角面板：左边名单，右边舞台 + 说明；粗几何无衬线字体、胶囊按钮、酸橙 / 紫罗兰高亮 */
:root{--ui:-apple-system,"SF Pro Display","PingFang SC","Helvetica Neue",sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--paper);color:var(--ink);font:15px/1.6 var(--ui);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
.stage i{font-family:var(--latin)}

/* ───── 顶栏 ───── */
.hd{height:64px;display:flex;align-items:center;gap:22px;padding:0 28px}
.hd .logo{display:flex;align-items:center;gap:7px;font:900 22px/1 var(--ui);letter-spacing:-.02em}
.hd .logo::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--hi)}
.hd .count{font:600 12px/1 var(--mono);color:var(--dim)}
.hd nav{margin-left:auto;display:flex;align-items:center;gap:18px;font:600 14px/1 var(--ui)}
.hd nav a{color:var(--dim)}
.hd nav a:hover{color:var(--ink)}
.hd .sm{border:none;border-radius:999px;background:var(--paper2)}
.hd .sm:hover{color:var(--accent)}

/* ───── 实验台：左边名单，右边舞台 + 说明（两块面板） ───── */
.bench{display:grid;grid-template-columns:260px 1fr;gap:14px;padding:0 14px 14px;height:calc(100% - 64px - 44px)}
.list,.main{background:var(--paper2);border-radius:22px}
.list{overflow:auto;padding:14px 0 18px}
.list h2{display:flex;align-items:baseline;padding:14px 22px 6px;font:800 12px/1 var(--ui);color:var(--ink)}
.list h2 em{margin-left:8px;font:500 11px/1 var(--mono);font-style:normal;color:var(--dim)}
.list h2 span{margin-left:auto;font:600 11px/1 var(--mono);color:var(--dim)}
.list button{display:flex;gap:10px;align-items:baseline;width:calc(100% - 20px);margin:2px 10px;padding:9px 14px;border:none;border-radius:999px;background:none;text-align:left;cursor:pointer;font:600 14px/1.3 var(--ui);color:var(--dim);transition:color .2s,background .2s}
.list button i{width:18px;font:700 11px/1 var(--mono);font-style:normal;color:var(--rule);transition:color .2s}
.list button:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 5%,transparent)}
.list button.on{background:var(--ink);color:var(--paper)}
.list button.on i{color:var(--hi)}
.main{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
.stage{position:relative;flex:1;min-height:360px;margin:10px 10px 0;border-radius:16px;overflow:hidden;background:var(--paper);container-type:size;touch-action:none}
.stage:fullscreen{background:var(--paper);border-radius:0;margin:0}
.info{display:grid;grid-template-columns:1fr .95fr 1.1fr;gap:20px;height:268px;flex:none;padding:20px 22px 22px;overflow:hidden}
.info>*{min-width:0}
.info .cat{display:inline-block;padding:5px 10px;border-radius:999px;background:var(--hi);color:#111;font:800 11px/1 var(--ui);letter-spacing:.02em}
.info h1{margin-top:10px;font:900 30px/1.15 var(--ui);letter-spacing:-.02em}
/* 说明最多三行，保证按钮不被挤出固定高度的面板 */
.info p{margin-top:8px;font:500 14px/1.65 var(--ui);color:var(--body);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.info .tech{margin-top:8px;font:500 12px/1.5 var(--mono);color:var(--dim)}
.info .act{margin-top:14px;display:flex;gap:8px}
.info .act button{padding:9px 14px;border:none;border-radius:999px;background:var(--paper);cursor:pointer;font:600 13px/1 var(--ui)}
.info .act button:hover{color:var(--accent)}
/* 参数面板：每个效果自己的滑块 / 文字框，外加共用的强调色；内容多时在面板里滚动 */
.params{display:flex;flex-direction:column;gap:10px;overflow:auto;padding:12px 14px;border-radius:16px;background:var(--paper)}
.params .ph{display:flex;align-items:baseline;gap:8px}
.params .ph b{font:800 13px/1 var(--ui)}
.params .ph span{font:500 11px/1 var(--mono);color:var(--dim)}
.params .ph button{margin-left:auto;padding:5px 10px;border:none;border-radius:999px;background:var(--paper2);cursor:pointer;font:700 11px/1 var(--ui);color:var(--dim)}
.params .ph button:hover{color:var(--ink)}
.pr{display:flex;flex-direction:column;gap:6px}
.pr>span{display:flex;justify-content:space-between;gap:10px;font:600 12px/1.2 var(--ui);color:var(--body)}
.pr em{font:500 11px/1.2 var(--mono);font-style:normal;color:var(--dim)}
.pr input[type=range]{width:100%;accent-color:var(--accent)}
.pr input[type=text],.pr textarea{width:100%;padding:7px 10px;border:1.5px solid transparent;border-radius:10px;background:var(--paper2);font:500 13px/1.45 var(--ui);color:var(--ink);resize:vertical}
.pr input[type=text]:focus,.pr textarea:focus{outline:none;border-color:var(--accent)}
.pc{flex-direction:row;align-items:center;justify-content:space-between}
.pc>span{flex:1}
.pc input[type=color]{width:34px;height:26px;padding:0;border:none;border-radius:8px;background:none;cursor:pointer}
.use{position:relative}
.use pre{height:100%;max-height:224px;overflow:auto;padding:14px 16px;border-radius:16px;background:var(--paper);font:500 12px/1.65 var(--mono);color:var(--body);white-space:pre-wrap;word-break:break-word}
.use .copies{position:absolute;right:10px;top:10px;display:flex;gap:6px}
.use .copy{padding:7px 12px;border:none;border-radius:999px;background:var(--paper2);cursor:pointer;font:700 11px/1 var(--ui);color:var(--dim)}
.use .copy.p{background:var(--accent);color:var(--on-accent)}
.use .copy:hover{filter:brightness(1.08)}
.use .copy:disabled{opacity:.4;cursor:default}
.ft-bar{height:44px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 28px;font:500 12px/1 var(--ui);color:var(--dim)}
.ft-bar a:hover{color:var(--ink)}

/* ───── 顶栏深浅开关的过渡：胶囊展开（只给实验台自己用，和名单里的 11 个过渡效果无关）
   新页面先从按钮处横向拉成一条胶囊，再上下撑满整屏；旧页面同时往后退一点 ───── */
html[data-hubfx]::view-transition-old(root),html[data-hubfx]::view-transition-new(root){animation:none;mix-blend-mode:normal}
html[data-hubfx]::view-transition-old(root){transform-origin:var(--hx) var(--hy)}
html[data-hubfx]::view-transition-group(root){background:#0B0B0D}

@media (max-width:860px){
  html,body{height:auto}
  .hd{padding:0 16px;gap:14px}.hd .count{display:none}
  .bench{display:block;height:auto;padding:0 10px 10px}
  .list{display:flex;gap:6px;overflow-x:auto;padding:10px;margin-bottom:10px}
  .list h2{display:none}
  .list button{flex:none;width:auto;margin:0;white-space:nowrap}
  .stage{height:62vh;flex:none}
  .info{grid-template-columns:1fr;height:auto;padding:18px 16px}
  .info p{-webkit-line-clamp:unset}
  .params{max-height:none}
  .ft-bar{height:auto;padding:14px 16px;flex-direction:column;align-items:flex-start;line-height:1.6}
}