/* ============ 调色板：想换风格改这里就够了 ============ */
:root{
  --ink:#eaf2ff;            /* 主文字 */
  --dim:#8ea3c4;            /* 次要文字 */
  --neon:#5fe3ff;           /* 主霓虹色 */
  --neon2:#ff7ab8;          /* 副霓虹色（点缀） */
  --glass:rgba(10,16,28,.52);
  --line:rgba(120,190,255,.28);
  --bezel:22px;             /* 四角装饰离边距离 */

  /* 刘海屏 / 底部小黑条的安全区，没有的设备上就是 0 */
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
  /* 手机键盘弹出来时占掉的高度，由 app.js 实时写进来 */
  --kb:0px;
}

*{box-sizing:border-box;}
html,body{height:100%;margin:0;}
body{
  background:#05070d;
  color:var(--ink);
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  font-size:16px;line-height:1.7;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  /* 手机：关掉下拉刷新和橡皮筋回弹，关掉点一下冒出来的灰色方块 */
  overscroll-behavior:none;
  -webkit-tap-highlight-color:transparent;
}
/* 装饰性的东西一律不许被长按选中，否则滑动时会误触"选择文字" */
.frame,.bg,.kicker,.title,.subtitle,.sound{user-select:none;-webkit-user-select:none;}

/* ============ 背景 ============ */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:
  radial-gradient(125% 95% at 50% 8%,#1b2c4e 0%,#0d1526 48%,#070b14 100%);}
.bg video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  /* 视频还没放进来 / 加载失败时，上面的渐变就是兜底背景 */
  opacity:0;transition:opacity 1.2s ease;
}
.bg.ready video{opacity:1;}

/* ---- 兜底舞台灯：四团缓慢游走的光晕 ----
   纯 CSS，没有图片也没有 JS。视频加载成功后 .bg.ready 会把它淡掉。 */
.bg-lights{position:absolute;inset:-18%;filter:blur(64px);opacity:.95;
  transition:opacity 1.2s ease;}
.bg.ready .bg-lights{opacity:0;}
.bg-lights i{position:absolute;display:block;border-radius:50%;mix-blend-mode:screen;}
.bg-lights i:nth-child(1){width:52%;height:58%;left:6%;top:4%;
  background:radial-gradient(circle,rgba(95,227,255,.40),transparent 68%);
  animation:drift1 34s ease-in-out infinite;}
.bg-lights i:nth-child(2){width:46%;height:52%;right:4%;top:10%;
  background:radial-gradient(circle,rgba(255,122,184,.34),transparent 68%);
  animation:drift2 41s ease-in-out infinite;}
.bg-lights i:nth-child(3){width:58%;height:46%;left:18%;bottom:2%;
  background:radial-gradient(circle,rgba(126,110,255,.34),transparent 70%);
  animation:drift3 47s ease-in-out infinite;}
.bg-lights i:nth-child(4){width:34%;height:34%;left:40%;top:34%;
  background:radial-gradient(circle,rgba(255,214,140,.20),transparent 66%);
  animation:drift4 29s ease-in-out infinite;}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(14%,10%) scale(1.18);}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1.1);}50%{transform:translate(-12%,14%) scale(.92);}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(10%,-12%) scale(1.15);}}
@keyframes drift4{0%,100%{transform:translate(0,0) scale(.9);}50%{transform:translate(-16%,-8%) scale(1.25);}}

/* ---- 背景照片轮播 ----
   叠在灯光层之上、视频层之下。第一张加载成功前不显示，
   所以网速慢或者文件丢了都不会白闪一下。 */
.bg-slides{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease;}
.bg.photos .bg-slides{opacity:1;}
.bg.photos .bg-lights{opacity:.35;}   /* 照片上来后灯光退到辅助位，留一点氛围 */
.bg.ready .bg-slides{opacity:0;}      /* 以后放了视频，照片自动让位 */

.slide{position:absolute;inset:0;opacity:0;transition:opacity var(--fade,1600ms) ease-in-out;}
.slide.on{opacity:1;}
.slide img{width:100%;height:100%;object-fit:cover;display:block;}
/* 缓慢推镜，让静态照片也有呼吸感 */
.slide.on img{animation:ken var(--ken,9700ms) ease-out both;}
@keyframes ken{from{transform:scale(1.02);}to{transform:scale(1.11);}}

/* 有人把系统的「减少动态效果」打开了就别晃了 */
@media (prefers-reduced-motion:reduce){
  .bg-lights i{animation:none;}
  .bg-scan{animation:none;}
  .t-name{animation:none;}
  .slide.on img{animation:none;}
}

/* 压暗 + 中心提亮，保证文字永远读得清 */
.bg-tint{position:absolute;inset:0;background:
  radial-gradient(78% 64% at 50% 46%,rgba(4,7,14,.20) 0%,rgba(4,7,14,.60) 62%,rgba(3,5,10,.86) 100%),
  linear-gradient(180deg,rgba(4,7,14,.55) 0%,transparent 22%,transparent 72%,rgba(3,5,10,.75) 100%);}

/* 扫描线 */
.bg-scan{position:absolute;inset:-2px;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.045) 0 1px,transparent 1px 4px);
  animation:scan 9s linear infinite;}
@keyframes scan{from{transform:translateY(0);}to{transform:translateY(4px);}}

/* 颗粒感 */
.bg-grain{position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* ============ 四角装饰 ============ */
.frame{position:fixed;inset:0;z-index:5;pointer-events:none;}
.frame .c{position:absolute;width:30px;height:30px;border:1.5px solid var(--line);opacity:.85;}
.frame .tl{top:calc(var(--bezel) + var(--safe-t));left:calc(var(--bezel) + var(--safe-l));border-right:0;border-bottom:0;}
.frame .tr{top:calc(var(--bezel) + var(--safe-t));right:calc(var(--bezel) + var(--safe-r));border-left:0;border-bottom:0;}
.frame .bl{bottom:calc(var(--bezel) + var(--safe-b));left:calc(var(--bezel) + var(--safe-l));border-right:0;border-top:0;}
.frame .br{bottom:calc(var(--bezel) + var(--safe-b));right:calc(var(--bezel) + var(--safe-r));border-left:0;border-top:0;}

/* ============ 声音开关 ============ */
.sound{position:fixed;z-index:4;top:calc(var(--bezel) + 6px + var(--safe-t));
  right:calc(var(--bezel) + 18px + var(--safe-r));
  display:inline-flex;align-items:center;gap:7px;
  background:var(--glass);border:1px solid var(--line);border-radius:999px;
  color:var(--dim);padding:7px 14px;font:inherit;font-size:12px;letter-spacing:.06em;
  cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:color .2s,border-color .2s;}
.sound:hover{color:var(--ink);border-color:rgba(120,190,255,.55);}
.sound[hidden]{display:none;}
.sound .ico{font-size:13px;line-height:1;}
/* 放歌的时候整颗按钮亮起来，图标换成三根跳动的声波条 */
.sound.on{color:var(--ink);border-color:rgba(95,227,255,.5);
  box-shadow:0 0 18px rgba(95,227,255,.18);}
.sound.on .ico{display:none;}
.sound .eq{display:none;}
.sound.on .eq{display:inline-flex;align-items:flex-end;gap:2px;height:12px;}
.sound .eq i{display:block;width:2px;border-radius:1px;background:var(--neon);
  box-shadow:0 0 6px rgba(95,227,255,.7);animation:eq .9s ease-in-out infinite;}
.sound .eq i:nth-child(2){animation-duration:.66s;animation-delay:-.2s;}
.sound .eq i:nth-child(3){animation-duration:1.1s;animation-delay:-.45s;}
@keyframes eq{0%,100%{height:3px;}50%{height:12px;}}
@media (prefers-reduced-motion:reduce){.sound .eq i{animation:none;height:8px;}}

/* ============ 翻页容器 ============
   页面不是横向排开的，而是像书一样一张压一张叠在一起：
   每一页绕自己的左边缘（= 书脊）转，转过去就露出下面那一页。
   高度用 dvh（手机浏览器地址栏伸缩时不会跳），再减掉键盘占的高度。 */
.pages{position:fixed;left:0;right:0;top:0;z-index:3;
  height:100%;height:calc(100dvh - var(--kb));
  perspective:1500px;              /* 没有这个就是平的，转起来不像纸 */
  perspective-origin:50% 46%;
  touch-action:pan-y;}             /* 横向交给我们自己处理，纵向留给浏览器 */

.page{position:absolute;inset:0;overflow:hidden;visibility:visible;
  transform-origin:left center;    /* 书脊在左边 */
  transition:transform .62s cubic-bezier(.33,.02,.25,1),visibility 0s;}
.page.dragging{transition:none;}   /* 手指按着的时候不要有过渡，不然会黏 */

/* 还没翻到的页压在最底下。首页本身是透明的（整站共用一张背景照片），
   所以底下这页必须真的藏起来，否则两页的字会叠在一起。
   藏的动作要等翻页动画放完再生效，不然往回翻时下面会先空一下。 */
.page.below{visibility:hidden;
  transition:transform .62s cubic-bezier(.33,.02,.25,1),visibility 0s linear .66s;}
.pages.boot .page{transition:none;}   /* 开局摆位不要有任何动画和延迟 */

/* 纸背：平时是透明的（这样整站共用同一张背景照片），
   只在这一页被翻动的那几百毫秒里变成不透明——纸是不透光的，
   不然翻页时会看见下面那一页的字直接透上来。 */
.ppaper{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
  transition:opacity .5s ease;
  background:radial-gradient(135% 105% at 0% 50%,#0c1526 0%,#070c18 56%,#05080f 100%);}
.page.turning .ppaper{opacity:1;transition-duration:.12s;}

/* 翻动中的那一页：靠近书脊的一侧压暗，像纸被掀起来时的背光
   （翻过 90° 以后整页就在屏幕左边外面了，所以只做前半程） */
.pshade{position:absolute;inset:0;z-index:9;pointer-events:none;opacity:0;
  background:linear-gradient(97deg,rgba(0,0,0,.66) 0%,rgba(0,0,0,.30) 26%,
                             rgba(0,0,0,.06) 52%,transparent 72%);}
.page.flip .pshade{animation:pageshade .62s cubic-bezier(.33,.02,.25,1) forwards;}
@keyframes pageshade{0%{opacity:0;}46%{opacity:.92;}100%{opacity:0;}}

/* 翻页瞬间书脊那条缝里透出来的暗影 */
.pages::after{content:"";position:absolute;left:0;top:0;bottom:0;width:22px;z-index:60;
  pointer-events:none;opacity:0;transition:opacity .3s ease;
  background:linear-gradient(90deg,rgba(0,0,0,.5),rgba(0,0,0,.14) 46%,transparent);}
.pages.flipping::after{opacity:1;}

@media (prefers-reduced-motion:reduce){
  .page{transition-duration:.01ms;}
  .page.flip .pshade{animation:none;}
  .pages::after{display:none;}
}

/* ============ 主体 ============ */
.stage{position:relative;z-index:3;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0 24px;text-align:center;}

.kicker{font-size:11px;letter-spacing:.42em;color:var(--dim);text-indent:.42em;
  opacity:0;animation:rise .9s .1s ease forwards;}

/* ---- 艺术字标题 ----
   刻意不用网络字体：Google Fonts 在国内打不开，她那边会卡在加载上。
   这里全靠系统字体 + CSS 做效果，任何设备打开都是秒出。 */
.title{margin:16px 0 0;display:flex;flex-direction:column;align-items:center;gap:2px;
  font-weight:400;line-height:1;
  opacity:0;animation:rise .9s .22s ease forwards;}

/* 上面那个小小的斜体 for */
.t-for{font-family:"Baskerville","Didot","Times New Roman",Georgia,serif;
  font-style:italic;font-size:clamp(17px,3.2vw,27px);letter-spacing:.34em;text-indent:.34em;
  color:rgba(234,242,255,.72);
  text-shadow:0 0 18px rgba(95,227,255,.45);}

/* 名字本体：渐变填色 + 流光 + 外发光 */
.t-name{
  font-size:clamp(46px,13.5vw,108px);font-weight:800;
  letter-spacing:.2em;text-indent:.2em;      /* 中文字距拉开才有气质 */
  background:linear-gradient(100deg,#ffffff 0%,#bfe9ff 22%,var(--neon) 42%,
                                    var(--neon2) 68%,#ffd9ec 84%,#ffffff 100%);
  background-size:260% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  /* 文字本身是透明的，text-shadow 打不出来，发光必须走 filter */
  filter:drop-shadow(0 0 22px rgba(95,227,255,.42))
         drop-shadow(0 0 60px rgba(255,122,184,.26));
  animation:shimmer 9s ease-in-out infinite;}
@keyframes shimmer{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}

/* 名字底下那道细光带 */
.t-rule{display:block;width:min(340px,62vw);height:1px;margin-top:18px;
  background:linear-gradient(90deg,transparent,rgba(95,227,255,.75),
                             rgba(255,122,184,.75),transparent);
  box-shadow:0 0 14px rgba(95,227,255,.5);}

.subtitle{margin-top:12px;font-size:12.5px;letter-spacing:.2em;color:var(--dim);
  opacity:0;animation:rise .9s .34s ease forwards;}

@keyframes rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

/* ============ 搜索框 ============ */
.searchbar{position:relative;display:flex;align-items:center;gap:10px;
  width:min(560px,100%);margin-top:38px;padding:4px 6px 4px 18px;
  background:var(--glass);border:1px solid var(--line);border-radius:999px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 18px 50px rgba(0,0,0,.5);
  transition:border-color .25s,box-shadow .25s;
  opacity:0;animation:rise .9s .46s ease forwards;}
.searchbar:focus-within{border-color:rgba(95,227,255,.75);
  box-shadow:0 0 0 1px rgba(255,255,255,.05) inset,0 0 34px rgba(95,227,255,.22),0 18px 50px rgba(0,0,0,.5);}

.searchbar .prompt{color:var(--neon);font-weight:700;font-size:16px;
  text-shadow:0 0 12px rgba(95,227,255,.75);user-select:none;}

.searchbar input{flex:1;min-width:0;background:none;border:0;outline:0;
  color:var(--ink);font:inherit;font-size:16.5px;letter-spacing:.04em;padding:13px 0;}
.searchbar input::placeholder{color:rgba(142,163,196,.62);letter-spacing:.1em;}

.searchbar .go{flex-shrink:0;width:42px;height:42px;border-radius:50%;
  background:rgba(95,227,255,.14);border:1px solid rgba(95,227,255,.4);
  color:var(--neon);font-size:17px;cursor:pointer;
  transition:background .2s,transform .12s;}
.searchbar .go:hover{background:rgba(95,227,255,.26);}
.searchbar .go:active{transform:scale(.93);}

.hint{margin-top:18px;min-height:20px;font-size:12.5px;letter-spacing:.08em;color:var(--dim);
  opacity:0;transition:opacity .3s;}
.hint.show{opacity:1;}
.hint b{color:var(--neon2);font-weight:600;}

/* 搜不到时整个框抖一下 */
.searchbar.shake{animation:shake .42s cubic-bezier(.36,.07,.19,.97);}
@keyframes shake{
  10%,90%{transform:translateX(-2px);} 20%,80%{transform:translateX(4px);}
  30%,50%,70%{transform:translateX(-7px);} 40%,60%{transform:translateX(7px);}}

/* ============ 第 2 页：留言本 ============ */
/* 这一页要读字也要写字，背景照片压得比首页更暗，只当纹理用 */
#p-notes::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,7,14,.91) 0%,rgba(5,9,18,.82) 38%,rgba(3,5,10,.94) 100%);}
.notes{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;
  padding:calc(var(--bezel) + var(--safe-t) + 44px) 22px calc(var(--bezel) + var(--safe-b) + 10px);
  padding-left:calc(22px + var(--safe-l));padding-right:calc(22px + var(--safe-r));
  max-width:620px;margin:0 auto;text-align:center;}

.n-title{margin:14px 0 0;font-size:clamp(26px,7vw,38px);font-weight:800;letter-spacing:.14em;
  text-indent:.14em;
  background:linear-gradient(100deg,#ffffff,#bfe9ff 30%,var(--neon) 55%,#ffd9ec 85%,#ffffff);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 0 18px rgba(95,227,255,.34));}
.n-sub{margin-top:10px;font-size:12px;letter-spacing:.14em;color:var(--dim);line-height:1.7;}
/* 翻开次数：明着给她看，淡一点当个脚注 */
.n-visits{color:var(--neon);opacity:.85;letter-spacing:.1em;}

/* ---- 写字区 ---- */
.n-form{flex-shrink:0;margin-top:20px;position:relative;}
.n-form textarea{
  width:100%;resize:none;overflow:hidden;        /* 高度由 JS 跟着内容长 */
  background:var(--glass);border:1px solid var(--line);border-radius:16px;
  color:var(--ink);font:inherit;font-size:16px;  /* 必须 ≥16px，否则 iOS 一聚焦就放大整页 */
  line-height:1.75;letter-spacing:.03em;padding:14px 16px;text-align:left;outline:0;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:border-color .25s,box-shadow .25s;}
.n-form textarea::placeholder{color:rgba(142,163,196,.6);letter-spacing:.08em;}
.n-form textarea:focus{border-color:rgba(95,227,255,.75);
  box-shadow:0 0 28px rgba(95,227,255,.18);}

/* 自动保存后的小提示，一闪而过（没有"存下来"按钮了） */
.n-state{height:16px;margin-top:6px;text-align:right;
  font-size:11px;letter-spacing:.14em;color:var(--neon);opacity:0;transition:opacity .25s;}
.n-state.show{opacity:.85;}

/* ---- 已经写下的 ---- */
.n-list{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  margin-top:18px;padding-bottom:8px;text-align:left;
  mask-image:linear-gradient(180deg,transparent 0,#000 14px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14px);}

.n-empty{color:var(--dim);font-size:13px;letter-spacing:.1em;text-align:center;padding:26px 0;}

.note{position:relative;margin-bottom:11px;padding:13px 42px 13px 16px;
  background:rgba(255,255,255,.04);border:1px solid rgba(120,190,255,.18);
  border-radius:13px;animation:pop .32s cubic-bezier(.2,.9,.3,1.2);}
.note .when{font-size:10.5px;letter-spacing:.2em;color:var(--dim);}
.note .what{margin-top:5px;font-size:15px;color:#d8e4f7;line-height:1.8;
  white-space:pre-wrap;word-break:break-word;}
.note .del{position:absolute;top:6px;right:6px;min-width:36px;height:36px;padding:0 9px;
  background:none;border:0;border-radius:9px;color:var(--dim);font:inherit;font-size:16px;
  line-height:36px;cursor:pointer;transition:color .2s,background .2s;}
.note .del:hover{color:var(--neon2);background:rgba(255,255,255,.06);}
/* 第一下只是"确认一下"，第二下才真删 */
.note .del.armed{color:var(--neon2);background:rgba(255,122,184,.14);font-size:11.5px;
  letter-spacing:.1em;}

/* ============ 结果卡片 ============ */
.sheet{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;
  padding:calc(26px + var(--safe-t)) calc(26px + var(--safe-r))
          calc(26px + var(--safe-b)) calc(26px + var(--safe-l));}
/* 作者样式表里的 display:flex 会压过浏览器默认的 [hidden]{display:none}，得补这一条 */
.sheet[hidden]{display:none;}
.sheet-bg{position:absolute;inset:0;background:rgba(3,5,10,.72);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  animation:fade .3s ease;}
@keyframes fade{from{opacity:0;}to{opacity:1;}}

.card{position:relative;width:min(600px,100%);max-height:82vh;max-height:82dvh;
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  background:linear-gradient(180deg,rgba(15,23,40,.94),rgba(9,14,26,.96));
  border:1px solid rgba(120,190,255,.34);border-radius:18px;
  padding:34px 34px 32px;text-align:left;
  box-shadow:0 0 0 1px rgba(255,255,255,.05) inset,0 34px 90px rgba(0,0,0,.72),
             0 0 60px rgba(95,227,255,.1);
  animation:pop .38s cubic-bezier(.2,.9,.3,1.2);}
@keyframes pop{from{opacity:0;transform:translateY(22px) scale(.97);}to{opacity:1;transform:none;}}

/* 卡片顶部那道流光 */
.card::before{content:"";position:absolute;left:24px;right:24px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--neon),transparent);opacity:.85;}

.close{position:absolute;top:14px;right:16px;width:32px;height:32px;
  background:none;border:0;color:var(--dim);font-size:24px;line-height:1;cursor:pointer;
  border-radius:50%;transition:color .2s,background .2s;}
.close:hover{color:var(--ink);background:rgba(255,255,255,.07);}

.card-tag{position:absolute;top:18px;right:58px;font-size:10px;letter-spacing:.24em;
  color:var(--neon2);opacity:.9;}
.card-key{font-size:10.5px;letter-spacing:.3em;color:var(--dim);text-indent:.3em;}
.card-title{margin:9px 0 18px;font-size:25px;font-weight:800;letter-spacing:.05em;
  text-shadow:0 0 22px rgba(95,227,255,.22);}
.card-body{font-size:15.5px;color:#d3e0f5;line-height:1.85;word-break:break-word;}
.card-body b{color:#fff;}
.card-body em{font-style:normal;color:var(--neon);text-shadow:0 0 14px rgba(95,227,255,.4);}
.card-body hr{border:0;border-top:1px dashed rgba(120,190,255,.28);margin:16px 0;}
.card-body img{max-width:100%;border-radius:10px;display:block;margin:12px 0;}
.card-body blockquote{margin:14px 0;padding:10px 0 10px 16px;color:#bccce6;
  border-left:2px solid var(--neon2);}
.card-body a{color:var(--neon);}

/* 一个词命中多条时的候选列表 */
.picklist{list-style:none;margin:6px 0 0;padding:0;}
.picklist li{margin:8px 0;}
.pick{width:100%;text-align:left;background:rgba(255,255,255,.04);
  border:1px solid rgba(120,190,255,.2);border-radius:11px;
  color:var(--ink);font:inherit;font-size:15px;padding:12px 15px;cursor:pointer;
  transition:border-color .2s,background .2s;}
.pick:hover{background:rgba(95,227,255,.1);border-color:rgba(95,227,255,.55);}
.pick small{display:block;color:var(--dim);font-size:12px;margin-top:2px;}

/* ============ 手机 ============ */
@media (max-width:560px){
  :root{--bezel:14px;}
  .stage{padding:0 18px;}
  .sound .txt{display:none;}
  .sound{padding:9px 12px;}
  .sheet{padding:16px calc(16px + var(--safe-r)) calc(16px + var(--safe-b)) calc(16px + var(--safe-l));}
  .card{padding:26px 20px 24px;max-height:86vh;max-height:86dvh;border-radius:16px;}
  .card-title{font-size:21px;}
  .card-body{font-size:15px;}
  .close{top:10px;right:10px;width:38px;height:38px;}  /* 手指点得到 */
  .card-tag{top:17px;right:58px;}
  .searchbar{margin-top:30px;padding-left:15px;}
  .searchbar input{font-size:16px;padding:12px 0;}
  .searchbar .go{width:40px;height:40px;}
  .subtitle{font-size:11.5px;letter-spacing:.16em;}
  .notes{padding-top:calc(var(--bezel) + var(--safe-t) + 38px);}
  .n-list{margin-top:14px;}
}
/* 很窄的小屏（SE 之类）：标题再收一点 */
@media (max-width:360px){
  .t-name{letter-spacing:.12em;text-indent:.12em;}
  .n-title{font-size:24px;}
}
/* 横屏手机 / 键盘弹起来把可视高度压扁时：别让内容顶出去 */
@media (max-height:460px){
  .t-name{font-size:34px;} .t-for{font-size:15px;} .t-rule{margin-top:10px;}
  .searchbar{margin-top:20px;} .hint{display:none;} .kicker{display:none;}
  .notes{padding-top:calc(var(--safe-t) + 16px);}
  .n-title{font-size:22px;margin-top:6px;} .n-sub{display:none;}
  .n-form{margin-top:12px;}
}