/* ===== Perspective Ruler — styles ===== */
:root{
  --bg:#101216; --panel:rgba(26,29,35,.92); --panel2:#2a2e37; --line:#363b46;
  --txt:#eef0f4; --sub:#9097a3; --accent:#5ec8ff; --accent2:#ff5d73; --good:#7cffb2;
  --shadow:0 12px 40px rgba(0,0,0,.5); --r:14px;
  --focus:0 0 0 2px var(--bg),0 0 0 4px var(--accent);
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
  --safe-l:env(safe-area-inset-left,0px); --safe-r:env(safe-area-inset-right,0px);
  --ui:'Outfit',-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Noto Sans JP",sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--txt);
  overscroll-behavior:none;font-family:var(--ui);font-feature-settings:"tnum" 1;}
canvas{display:block;width:100%;height:100%;touch-action:none;}
svg{display:block;}
.ic{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}

/* keyboard focus ring (mouse/touch stays clean) */
:focus{outline:none;}
.tb:focus-visible,.swatch:focus-within,.del:focus-visible,
.step .ctl button:focus-visible{box-shadow:var(--focus);}
input[type=range]:focus-visible{box-shadow:0 0 0 3px rgba(94,200,255,.35);}
.switch input:focus-visible + span{box-shadow:var(--focus);}

/* empty state */
#drop{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:18px;z-index:3;color:var(--sub);text-align:center;cursor:pointer;
  padding:24px;background:radial-gradient(120% 80% at 50% 35%,#1a1d23 0%,#101216 70%);}
#drop .ico{width:76px;height:76px;border:2px dashed var(--line);border-radius:20px;
  display:flex;align-items:center;justify-content:center;color:var(--accent);transition:.2s;}
#drop .ico .ic{width:30px;height:30px;}
#drop .t1{font-size:16px;color:var(--txt);font-weight:600;letter-spacing:.02em;margin-bottom:6px;}
#drop .t2{font-size:12.5px;line-height:1.8;}
#drop kbd{font-family:var(--ui);font-size:11px;background:var(--panel2);border:1px solid var(--line);
  border-radius:5px;padding:1px 6px;color:var(--txt);font-weight:600;}
#drop.hide{display:none;}
.drop-about{color:var(--accent);font-size:12px;font-weight:600;text-decoration:none;opacity:.85;
  border:1px solid var(--line);border-radius:999px;padding:7px 16px;transition:.15s;}
.drop-about:hover{opacity:1;background:var(--panel2);}
.sheet-about{color:var(--sub);font-size:11.5px;font-weight:600;text-decoration:none;text-align:center;
  padding-top:12px;border-top:1px solid var(--line);margin-top:10px;}
.sheet-about:hover{color:var(--accent);}
body.dragover #drop .ico{border-color:var(--accent);transform:scale(1.06);background:rgba(94,200,255,.1);}
body.dragover #drop::after{content:"";position:fixed;inset:10px;border:2px dashed var(--accent);
  border-radius:18px;pointer-events:none;z-index:4;opacity:.5;}

/* top toolbar */
.topbar{position:fixed;top:calc(10px + var(--safe-t));left:50%;transform:translateX(-50%);z-index:8;
  display:flex;gap:4px;align-items:center;background:var(--panel);border:1px solid var(--line);
  border-radius:13px;padding:5px;box-shadow:var(--shadow);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);max-width:calc(100vw - 12px - var(--safe-l) - var(--safe-r));
  overflow-x:auto;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--fl,0px),#000 calc(100% - var(--fr,0px)),transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 var(--fl,0px),#000 calc(100% - var(--fr,0px)),transparent 100%);}
.topbar.fl{--fl:22px;}   /* 左にスクロール可：左端をフェード */
.topbar.fr{--fr:22px;}   /* 右にスクロール可：右端をフェード（続きがある合図） */
.topbar::-webkit-scrollbar{display:none;}
.tb{appearance:none;border:0;background:transparent;color:var(--txt);height:38px;min-width:38px;
  padding:0 9px;border-radius:9px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  gap:6px;font-size:13px;font-weight:600;transition:background .12s,transform .08s,opacity .12s;
  font-variant-numeric:tabular-nums;flex:none;font-family:var(--ui);}
@media (hover:hover){.tb:hover{background:var(--panel2);}}
.tb:active{transform:scale(.93);}
.tb.cta{background:var(--accent);color:#072433;padding:0 14px;}
@media (hover:hover){.tb.cta:hover{filter:brightness(1.08);background:var(--accent);}}
.tb:disabled{opacity:.3;pointer-events:none;}
.sep{width:1px;height:22px;background:var(--line);margin:0 3px;flex:none;}
.grp{display:flex;background:var(--panel2);border-radius:9px;padding:2px;gap:2px;flex:none;}
.grp .tb{height:34px;min-width:38px;font-size:12.5px;}
.grp .tb.on{background:var(--accent);color:#072433;}

/* selected VP bar */
.vpbar{position:fixed;left:50%;transform:translateX(-50%) translateY(14px);z-index:7;
  bottom:calc(70px + var(--safe-b));display:none;align-items:center;gap:4px;background:var(--panel);
  border:1px solid var(--line);border-radius:13px;padding:6px;box-shadow:var(--shadow);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);opacity:0;transition:.18s;
  max-width:calc(100vw - 12px);}
.vpbar.show{display:flex;opacity:1;transform:translateX(-50%) translateY(0);}
.vpbar .tag{font-size:12px;color:var(--sub);padding:0 4px 0 6px;font-weight:700;font-variant-numeric:tabular-nums;}
.swatch{width:30px;height:30px;border-radius:9px;position:relative;overflow:hidden;cursor:pointer;
  border:2px solid rgba(255,255,255,.15);flex:none;}
.swatch input{position:absolute;inset:-8px;opacity:0;cursor:pointer;}
.step{display:flex;flex-direction:column;align-items:center;background:var(--panel2);border-radius:9px;padding:2px 2px 1px;}
.step .lab{font-size:8.5px;color:var(--sub);letter-spacing:.04em;line-height:1;margin-bottom:1px;}
.step .ctl{display:flex;align-items:center;}
.step .ctl button{appearance:none;border:0;background:transparent;color:var(--txt);width:30px;height:30px;
  font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:6px;font-family:var(--ui);}
.step .ctl button:active{background:#3a404b;transform:scale(.9);}
.step .num{min-width:32px;text-align:center;font-size:12.5px;font-variant-numeric:tabular-nums;font-weight:600;}
.vpbar .del{width:36px;height:34px;border:0;background:transparent;color:var(--accent2);
  border-radius:9px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.vpbar .del:active{background:rgba(255,93,115,.15);}

/* settings sheet */
.sheet{position:fixed;z-index:6;--hd-h:48px;overflow:hidden;background:var(--panel);border:1px solid var(--line);
  box-shadow:var(--shadow);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  }
.sheet .hd{display:flex;align-items:center;gap:8px;height:var(--hd-h);padding:0 16px;cursor:pointer;font-size:12px;
  letter-spacing:.1em;color:var(--sub);font-weight:700;user-select:none;}
.sheet .hd .grab{display:none;}
.sheet .hd .sp{flex:1;}
.sheet .hd .car{transition:.2s;color:var(--sub);}
.sheet.open .hd .car{transform:rotate(180deg);}
.sheet .bd{padding:2px 16px 18px;display:flex;flex-direction:column;gap:15px;overflow:hidden;min-height:0;
  max-height:108px;transition:max-height .32s cubic-bezier(.4,0,.2,1);
  -webkit-mask-image:linear-gradient(to bottom,#000 34px,transparent 104px);
          mask-image:linear-gradient(to bottom,#000 34px,transparent 104px);}
.sheet:not(.open) .bd{pointer-events:none;}        /* 覗き部分の誤操作を防止 */
.sheet.open .bd{-webkit-mask-image:none;mask-image:none;}
/* 開けることを示すヒント：閉じている間は見出しの矢印をやさしく上下 */
@media (min-width:561px){.sheet:not(.open) .hd .car{animation:caretBob 1.7s ease-in-out infinite;}}
@keyframes caretBob{0%,100%{transform:translateY(0);}50%{transform:translateY(3px);}}
.row label{font-size:11.5px;color:var(--sub);display:flex;justify-content:space-between;margin-bottom:7px;}
.row label b{color:var(--txt);font-weight:700;font-variant-numeric:tabular-nums;}
input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:4px;border-radius:4px;
  background:var(--panel2);cursor:pointer;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:var(--accent);cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.4);}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%;background:var(--accent);cursor:pointer;}
.toggle{display:flex;align-items:center;justify-content:space-between;font-size:13px;gap:12px;}
.toggle.off{opacity:.4;pointer-events:none;}   /* 魚眼モードで無効化 */
.switch{position:relative;width:42px;height:24px;flex:none;border-radius:24px;}
.switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;}
.switch span{position:absolute;inset:0;background:var(--panel2);border-radius:24px;transition:.16s;pointer-events:none;}
.switch span::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;background:#fff;
  border-radius:50%;transition:.16s;}
.switch input:checked + span{background:var(--accent);}
.switch input:checked + span::after{transform:translateX(18px);}

/* desktop: floating card bottom-right */
@media (min-width:561px){
  .sheet{right:calc(14px + var(--safe-r));bottom:calc(14px + var(--safe-b));width:300px;border-radius:var(--r);}
  .vpbar{bottom:calc(14px + var(--safe-b));}
}
/* mobile: bottom sheet */
@media (max-width:560px){
  .sheet{--hd-h:54px;left:0;right:0;bottom:0;border-radius:18px 18px 0 0;border-bottom:0;padding-bottom:var(--safe-b);}
  /* スマホでは閉じている間は本文を見せず「表示設定」だけにする（重なり回避） */
  .sheet:not(.open) .bd{max-height:0;padding-top:0;padding-bottom:0;-webkit-mask-image:none;mask-image:none;}
  .sheet .hd{justify-content:center;flex-direction:column;gap:5px;position:relative;}
  .sheet .hd .grab{display:block;width:38px;height:4px;border-radius:4px;background:var(--line);}
  .sheet .hd .sp,.sheet .hd .car{display:none;}
  .sheet .hd .lbl{font-size:11px;}
  .vpbar{bottom:calc(66px + var(--safe-b));}
  .tb .lbl{display:none;}
  .tb.cta .lbl{display:inline;}
  .topbar{gap:3px;}
}

.sheet.open{z-index:11;}
.vpbar.show.duck{opacity:0;pointer-events:none;transform:translateX(-50%) translateY(18px);}

.toast{position:fixed;top:calc(64px + var(--safe-t));left:50%;transform:translateX(-50%) translateY(-8px);
  background:rgba(20,22,27,.95);border:1px solid var(--line);color:var(--txt);font-size:12px;
  padding:9px 15px;border-radius:11px;z-index:60;box-shadow:var(--shadow);opacity:0;pointer-events:none;
  transition:.25s;max-width:calc(100vw - 24px);text-align:center;line-height:1.5;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

.modal{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.8);display:none;
  align-items:center;justify-content:center;flex-direction:column;gap:14px;padding:24px 16px;
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);}
.modal.show{display:flex;}
.modal .mt{font-size:14.5px;font-weight:700;color:#fff;}
#mImg{max-width:90vw;max-height:62vh;border-radius:10px;border:1px solid var(--line);background:#0c0e11;
  box-shadow:var(--shadow);-webkit-touch-callout:default;-webkit-user-select:auto;user-select:auto;}
.modal .mh{font-size:12.5px;color:var(--sub);text-align:center;line-height:1.7;}
.modal .mr{display:flex;gap:10px;}
.modal .mr .tb{height:42px;border:1px solid var(--line);}
.modal .mr a.tb{text-decoration:none;}

/* ===== light theme ===== */
body.light{
  --bg:#eef0f4;--panel:rgba(255,255,255,.9);--panel2:#e4e7ee;--line:#cfd4dd;
  --txt:#171a1f;--sub:#5f6671;--shadow:0 10px 36px rgba(20,30,50,.16);
}
body.light #drop{background:radial-gradient(120% 80% at 50% 35%,#f7f8fb 0%,#e8ebf1 70%);}
body.light .toast{background:rgba(255,255,255,.96);}
body.light #mImg{background:#f0f2f6;}
body.light .swatch{border-color:rgba(0,0,0,.14);}

/* theme toggle button: sun in dark, moon in light */
#theme .ico-moon{display:none;}
body.light #theme .ico-sun{display:none;}
body.light #theme .ico-moon{display:block;}

/* respect reduced motion */
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important;}
}