*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
  html,body{height:100%;background:#05070d;color:#fff;font-family:"Noto Sans JP",sans-serif;overflow:hidden}
  #app{position:fixed;inset:0}

  .screen{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center}
  .screen.on{display:flex}
  .btn{appearance:none;border:0;border-radius:999px;padding:17px 46px;font-size:17px;font-weight:700;
       color:#0a3a72;background:#fff;cursor:pointer;font-family:"Noto Sans JP",sans-serif;box-shadow:0 10px 30px rgba(0,0,0,.35)}
  .btn:active{transform:scale(.97)}

  /* ===== ① ウェルカム ===== */
  #start{background:#0a2a55 center/cover no-repeat}
  #start .veil{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(6,24,54,.10) 0%,rgba(6,24,54,0) 30%,rgba(6,24,54,.18) 58%,rgba(6,24,54,.86) 100%)}
  #start .inner{position:relative;z-index:1;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:0 26px}
  #start .conf{position:absolute;top:40px;left:0;right:0;text-align:center;font-size:12px;letter-spacing:1.2px;color:#eaf4ff;text-shadow:0 1px 6px rgba(0,0,0,.55)}
  #start .hero{margin-top:96px;text-align:center}
  #start .hero .t1{font-weight:600;font-size:34px;line-height:1.4;letter-spacing:6px;text-shadow:0 3px 16px rgba(3,22,52,.55)}
  #start .hero .t2{font-weight:700;font-size:16px;margin-top:14px;color:#eaf4ff;text-shadow:0 2px 10px rgba(3,22,52,.6)}
  #start .foot{position:absolute;left:0;right:0;bottom:calc(40px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center}
  .logocard{background:#fff;border-radius:16px;padding:14px 18px;display:flex;flex-direction:column;gap:10px;align-items:center;box-shadow:0 8px 26px rgba(0,0,0,.28);width:min(86%,360px);margin-bottom:22px}
  .logocard img.v{height:30px;width:auto}
  .logocard .div{width:100%;height:1px;background:#e9e9e9}
  .logocard img.p{width:100%;max-width:300px;height:auto}
  #start .note{font-size:11px;color:#dbe7f7;margin-top:14px;text-shadow:0 1px 4px rgba(0,0,0,.5)}

  /* ===== ② 使い方 ===== */
  #howto{background:radial-gradient(120% 80% at 50% 0%,#10498f 0%,#0a2a55 60%,#061a36 100%);padding:42px 26px calc(36px + env(safe-area-inset-bottom));justify-content:space-between}
  #howto h2{font-size:22px;font-weight:700;margin-top:4px}
  #howto h2 small{display:block;font-size:12px;font-weight:500;color:#bcd6f5;margin-top:8px;letter-spacing:1px}
  #howto .steps{display:flex;flex-direction:column;gap:16px;width:min(92%,420px);margin:4px 0}
  #howto .step{display:flex;align-items:center;gap:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:15px 18px}
  #howto .num{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:#fff;color:#0a3a72;font-weight:900;font-size:18px;display:flex;align-items:center;justify-content:center}
  #howto .tx{font-size:15px;line-height:1.5}
  #howto .tx b{font-weight:700}
  #howto .tx span{display:block;font-size:12px;color:#bcd6f5;margin-top:2px}
  #howto .cam-note{font-size:12px;color:#bcd6f5;margin-bottom:14px}

  /* ===== ローディング ===== */
  #loading{background:#061a36}
  .spin{width:46px;height:46px;border:4px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:sp 1s linear infinite;margin-bottom:18px}
  @keyframes sp{to{transform:rotate(360deg)}}
  #loading p{font-size:14px;color:#cfe0f5}

  /* ===== ③ AR ===== */
  #stage{background:#000}
  #view{height:100%;width:100%;object-fit:contain;display:block}
  #top{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:center;padding:14px 16px;
       background:linear-gradient(to bottom,rgba(0,0,0,.32),rgba(0,0,0,0));font-size:12px;color:#dceaff}
  #top .tag{background:rgba(0,0,0,.3);padding:5px 10px;border-radius:999px}
  #kvswap{font-size:12px;color:#dceaff;background:rgba(0,0,0,.3);border:0;border-radius:999px;padding:6px 12px;cursor:pointer;font-family:inherit}
  #bar{position:absolute;left:0;right:0;bottom:0;height:170px;display:flex;align-items:center;justify-content:center;gap:34px;
       background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0));padding-bottom:env(safe-area-inset-bottom)}
  .ctl{display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;color:#fff;font-family:inherit;font-size:12px;cursor:pointer;width:64px}
  .ctl .ic{width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;font-size:20px;backdrop-filter:blur(4px)}
  .ctl:active{opacity:.7}
  #shot{width:82px;height:82px;border-radius:50%;background:#fff;border:5px solid rgba(255,255,255,.45);cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.4)}
  #shot:active{transform:scale(.94)}
  #count{position:absolute;inset:0;display:none;align-items:center;justify-content:center;font-size:160px;font-weight:900;color:#fff;text-shadow:0 4px 30px rgba(0,0,0,.6)}
  #count.on{display:flex}

  /* ===== ④ 結果 ===== */
  #result{background:#000}
  #result img{height:100%;width:100%;object-fit:contain}
  #result .acts{position:absolute;left:0;right:0;bottom:0;padding:22px 18px calc(28px + env(safe-area-inset-bottom));display:flex;gap:14px;justify-content:center;
                background:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,0))}
  .btn2{appearance:none;border:0;border-radius:999px;padding:14px 26px;font-size:15px;font-weight:700;font-family:inherit;cursor:pointer}
  .btn2.save{background:#fff;color:#0a3a72;text-decoration:none}
  .btn2.retry{background:rgba(255,255,255,.2);color:#fff}
  #result .hint{position:absolute;top:16px;left:0;right:0;text-align:center;font-size:12px;color:rgba(255,255,255,.85);text-shadow:0 1px 4px rgba(0,0,0,.6)}

  /* ===== エラー ===== */
  #err{background:#1a0e12;text-align:center;padding:34px}
  #err h2{font-size:18px;margin-bottom:12px}
  #err p{font-size:13px;line-height:1.9;color:#f0c9c9;max-width:340px;margin-bottom:20px;white-space:pre-line}