:root{
  --ink:#f2effc;
  --acc1:#6fd8ff;
  --acc2:#b07cff;
  --panel:rgba(19,17,36,.95);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;overflow:hidden;background:#0b0a18;overscroll-behavior:none;}
body{
  font-family:"Hiragino Maru Gothic ProN","Hiragino Sans","Yu Gothic UI","Noto Sans JP",system-ui,sans-serif;
  color:var(--ink);-webkit-user-select:none;user-select:none;
}
#cv{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;}

#hint{
  position:fixed;inset:0;z-index:5;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;transition:opacity .6s ease;
}
#hint.off{opacity:0;}
#hint .pulse{width:76px;height:76px;border-radius:50%;border:2px solid rgba(242,239,252,.75);animation:pl 1.9s ease-out infinite;margin-bottom:18px;}
#hint .big{font-size:22px;font-weight:700;letter-spacing:.08em;text-shadow:0 0 20px rgba(176,124,255,.6);margin-bottom:10px;}
#hint .small{font-size:13px;opacity:.6;letter-spacing:.05em;}
@keyframes pl{0%{transform:scale(.5);opacity:.9;}70%{transform:scale(1.3);opacity:0;}100%{transform:scale(1.3);opacity:0;}}
@media (prefers-reduced-motion:reduce){#hint .pulse{animation:none;opacity:.5;}}

#gear{
  position:fixed;z-index:20;cursor:pointer;
  top:calc(env(safe-area-inset-top,0px) + 14px);right:14px;
  width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(242,239,252,.18);
  background:rgba(22,20,40,.55);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  color:var(--ink);display:flex;align-items:center;justify-content:center;transition:transform .2s ease;
}
#gear:active{transform:scale(.92) rotate(30deg);}


#panel{
  position:fixed;left:0;right:0;bottom:0;z-index:30;margin:0 auto;max-width:560px;
  background:var(--panel);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  border:1px solid rgba(242,239,252,.1);border-bottom:none;border-radius:22px 22px 0 0;
  transform:translateY(110%);
  transition:transform .38s cubic-bezier(.22,1,.36,1), opacity .18s ease;
  display:flex;flex-direction:column;max-height:58vh;
  box-shadow:0 -18px 50px rgba(0,0,0,.45);
}
#panel.open{transform:translateY(0);}
#panel.peek{opacity:.07;pointer-events:none;}
.grab{width:38px;height:4px;border-radius:99px;background:rgba(242,239,252,.22);margin:9px auto 0;flex:none;}
.tip{
  font-size:11.5px;line-height:1.5;opacity:.5;padding:0 20px 10px;flex:none;
}
.tip b{color:var(--acc1);font-weight:600;}
.ph{display:flex;align-items:center;gap:10px;padding:16px 20px 10px;flex:none;}
.ph h2{font-size:17px;letter-spacing:.06em;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ph .rnd{font-size:14px;}
.rnd.warn{background:rgba(255,110,110,.42);animation:wb .8s ease-in-out infinite;}
@keyframes wb{50%{background:rgba(255,110,110,.16);}}
.rnd{width:32px;height:32px;border-radius:50%;border:none;cursor:pointer;background:rgba(242,239,252,.1);color:var(--ink);font-size:15px;font-family:inherit;line-height:1;flex:none;}
.rnd:active{transform:scale(.92);}
.rnd[hidden]{display:none;}
#playBtn.on{background:rgba(176,124,255,.32);}
.tabs{display:flex;gap:6px;padding:0 20px 10px;flex:none;overflow-x:auto;}
.tabs.hide{display:none;}
.tabs button{
  flex:1;min-width:70px;padding:9px 4px;border:none;border-radius:11px;cursor:pointer;
  background:rgba(242,239,252,.07);color:rgba(242,239,252,.6);
  font-size:13px;font-weight:600;font-family:inherit;transition:.2s;white-space:nowrap;
}
.tabs button.on{background:linear-gradient(135deg,var(--acc1),var(--acc2));color:#100f1e;}
#body{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 20px calc(env(safe-area-inset-bottom,0px) + 22px);flex:1;}

.sec{display:none;}
.sec.on{display:block;}
#simpleWrap[hidden],#proWrap[hidden]{display:none;}
.rl{display:flex;align-items:center;gap:12px;min-width:0;}
.ic{font-size:20px;width:26px;text-align:center;flex:none;}
.more{
  width:100%;margin-top:18px;padding:15px 12px;border-radius:15px;cursor:pointer;
  border:1px solid rgba(176,124,255,.4);
  background:linear-gradient(135deg,rgba(111,216,255,.14),rgba(176,124,255,.2));
  color:var(--ink);font-family:inherit;font-size:13.5px;font-weight:700;letter-spacing:.03em;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.more:active{transform:scale(.98);}
.more span{opacity:.6;font-weight:400;font-size:11.5px;}
.item{padding:12px 0;border-top:1px solid rgba(242,239,252,.07);transition:opacity .2s;}
.item.dim{opacity:.32;pointer-events:none;}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.nm{font-size:14.5px;font-weight:600;}
.sb{font-size:11.5px;opacity:.5;margin-top:2px;line-height:1.4;}
.val{font-size:12px;opacity:.65;font-variant-numeric:tabular-nums;flex:none;}

.sw{position:relative;width:52px;height:31px;flex:none;}
.sw input{position:absolute;inset:0;opacity:0;margin:0;z-index:2;cursor:pointer;}
.tr{position:absolute;inset:0;border-radius:999px;background:rgba(242,239,252,.16);transition:background .25s;}
.tr::after{content:"";position:absolute;top:3px;left:3px;width:25px;height:25px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.45);transition:transform .25s;}
.sw input:checked + .tr{background:linear-gradient(90deg,var(--acc1),var(--acc2));}
.sw input:checked + .tr::after{transform:translateX(21px);}

input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:26px;background:transparent;margin-top:8px;cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:99px;background:rgba(242,239,252,.16);}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 7px rgba(0,0,0,.5);margin-top:-8.5px;}
input[type=range]::-moz-range-track{height:5px;border-radius:99px;background:rgba(242,239,252,.16);}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border:none;border-radius:50%;background:#fff;}

.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px;}
.chip{
  padding:7px 13px;border-radius:99px;border:1px solid rgba(242,239,252,.16);
  background:transparent;color:rgba(242,239,252,.55);font-size:12.5px;font-family:inherit;
  cursor:pointer;transition:.18s;
}
.chip.on{background:rgba(176,124,255,.28);border-color:rgba(176,124,255,.75);color:#fff;}
.chip:active{transform:scale(.94);}
.seg{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.seg .chip{flex:1;min-width:62px;text-align:center;}
.acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.acts button{
  flex:1;min-width:88px;padding:11px 8px;border-radius:12px;border:1px solid rgba(242,239,252,.16);
  background:rgba(242,239,252,.06);color:var(--ink);font-size:12.5px;font-weight:600;font-family:inherit;cursor:pointer;
}
.acts button:active{transform:scale(.96);}
.note{font-size:11.5px;opacity:.42;line-height:1.6;padding:14px 0 4px;border-top:1px solid rgba(242,239,252,.07);margin-top:4px;}