:root { --paper:#F5EBDA; --card:#FBF5EA; --loess:#D9B47A; --loess-lt:#EBD3A6; --ochre:#8B4A2B; --red:#B8322A; --ink:#2B2420; }
  * { box-sizing:border-box; }
  html { background:var(--paper) url(assets/c7843d08ca90e957.jpg) center/cover fixed; }
  html, body { margin:0; height:100%; }
  body { font-family:"华文楷体","STKaiti","KaiTi",serif; color:var(--ink); display:grid; grid-template-columns:40vw 1fr; overflow:hidden;
         }
  aside { padding:3vh 2vw 3vh 3vw; display:flex; flex-direction:column; gap:2vh; }
  aside h1 { margin:0; font:700 4.2vh "黑体","SimHei",sans-serif; display:flex; align-items:center; gap:1vw; }
  aside h1 img { height:6vh; }
  .scene { width:100%; border-radius:2vh; border:.4vh solid var(--ochre); box-shadow:0 .8vh 2vh rgba(139,74,43,.2); }
  .card { background:var(--card); border:2px solid var(--ochre); border-radius:2vh; padding:1.8vh 1.6vw; font-size:2.8vh; line-height:1.5; }
  .card b { color:var(--red); }
  .shout { display:grid; grid-template-columns:repeat(3,auto) 1fr; column-gap:1.6vw; align-items:end; margin-top:1vh;
           font:700 3.4vh "Times New Roman",serif; }
  .shout .w { font:700 3.2vh "华文楷体","STKaiti",serif; color:var(--ochre); text-align:center; }
  .u { border-bottom:.35vh solid var(--ink); } .u2 { border-bottom:.35vh solid var(--ink); padding-bottom:.9vh; }
  main { padding:3vh 3vw 3vh 1vw; display:flex; flex-direction:column; gap:2vh; }
  .pads { flex:1; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(2,1fr); gap:2vh 1.4vw; }
  .pad { position:relative; border:0; border-radius:3vh; cursor:pointer; font:inherit; color:var(--paper);
         display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1vh;
         box-shadow:0 1vh 0 rgba(43,36,32,.35), inset 0 0 0 .5vh rgba(245,235,218,.35); transition:transform .06s, box-shadow .06s; user-select:none; }
  .pad .ico { font:12vh/1 "华文行楷","STXingkai",serif; }
  .pad .nm { font-size:3.2vh; opacity:.9; font-weight:700; letter-spacing:.4vh; }
  .pad .key { position:absolute; top:1.4vh; right:1.6vh; font:700 2.2vh Consolas,monospace; background:rgba(245,235,218,.25); padding:.2vh .8vh; border-radius:.8vh; }
  .pad.hit { transform:translateY(.8vh); box-shadow:0 .2vh 0 rgba(43,36,32,.35), inset 0 0 0 .5vh rgba(245,235,218,.6); filter:brightness(1.15); }
  .bar { display:flex; align-items:center; gap:1.6vw; background:rgba(251,245,234,.94); border:2px solid var(--loess); border-radius:999px;
         padding:1.2vh 2vw; font-size:2.6vh; }
  .bar button { font:inherit; font-size:2.6vh; border:2px solid var(--red); background:var(--red); color:var(--paper); border-radius:999px; padding:.6vh 1.6vw; cursor:pointer; }
  .bar button.off { background:var(--card); color:var(--red); }
  .beat { width:3vh; height:3vh; border-radius:50%; background:var(--loess-lt); }
  .beat.on { background:var(--red); }
  .bar input { accent-color:var(--red); }

h1{font-family:"Microsoft YaHei","微软雅黑",sans-serif!important;font-weight:700!important}.return-note{position:fixed;right:18px;top:10px;font:14px "Microsoft YaHei",sans-serif;color:#fff;background:#70442bd9;padding:5px 9px;z-index:99;pointer-events:none}
.bar{gap:1vw!important}.bar button{white-space:nowrap;flex-shrink:0;font-size:20px;padding:9px 14px}.bar span{white-space:nowrap;font-size:20px}.bar input[type=range]{width:10vw}.return-note{top:auto!important;bottom:8px!important}