:root{
  --bg1:#b3e5fc; --bg2:#e1f5fe;
  --primary:#03a9f4; --primary-2:#0288d1;
  --ink:#01334d; --card:#ffffff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui, -apple-system, "Poppins", Arial, sans-serif;
  background:linear-gradient(180deg,var(--bg1),var(--bg2));
  color:var(--ink);
  display:flex; flex-direction:column;
  overscroll-behavior:contain;
  touch-action:manipulation;
}
.appbar{
  position:sticky; top:0;
  backdrop-filter:saturate(1.2) blur(8px);
  background:#ffffffa6; border-bottom:1px solid #00000012;
  padding:10px 16px; display:flex; align-items:center; justify-content:space-between;
}
.appbar h1{margin:0; font-size:20px; letter-spacing:.3px}
.container{flex:1; display:grid; place-items:center; padding:20px}
.card{
  width:min(560px, 92vw);
  background:var(--card);
  border-radius:18px;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
  padding:18px; text-align:center;
}
.image-wrap{
  width:100%; aspect-ratio:1/1;
  border-radius:14px; overflow:hidden;
  display:grid; place-items:center;
  background:#f3fbff;
}
.image-wrap img{width:92%; height:92%; object-fit:contain; transition:transform .35s ease;}
h2{margin:14px 0 10px; font-size:26px}
.controls{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.controls.second{margin-top:6px}
.btn{
  padding:12px 16px; border-radius:12px; border:0; cursor:pointer;
  background:#e6f5ff; color:var(--ink); font-weight:600; font-size:16px;
  transition:transform .15s ease, background .2s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn.primary{background:var(--primary); color:#fff}
.btn.ghost{background:transparent; border:1px solid #00000022}
.switch{display:inline-flex; align-items:center; gap:8px; user-select:none}
.switch input{width:18px; height:18px}
.footer{padding:10px 16px; text-align:center; opacity:.7}
.gate{position:fixed; inset:0; display:grid; place-items:center; background:linear-gradient(180deg,var(--bg1),var(--bg2)); transition:opacity .3s ease, visibility .3s ease;}
.gate:not(.show){opacity:0; visibility:hidden}
.gate-inner{background:#fff; padding:24px; border-radius:16px; box-shadow:0 10px 26px rgba(0,0,0,.18); text-align:center; width:min(480px, 90vw);}
.hint{opacity:.65; font-size:12px; margin-top:8px}
/* anti zoom double-tap */
*{touch-action:manipulation}