:root {
  font-family: "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  color: #17374d;
  background: #9edcff;
}
* { box-sizing: border-box; }
html, body, #app { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: radial-gradient(circle at 50% 20%, #fff8da 0, #b8e8ff 38%, #7bc4ec 100%); }
canvas { display: block; width: 100%; height: 100%; }
.panel {
  position: fixed;
  z-index: 20;
  left: 50%; top: 50%;
  width: min(92vw, 560px);
  transform: translate(-50%, -50%);
  padding: 28px 28px 24px;
  border: 2px solid rgba(255,255,255,.82);
  border-radius: 28px;
  color: #15394d;
  text-align: center;
  background: rgba(247, 253, 255, .86);
  box-shadow: 0 24px 80px rgba(25, 83, 117, .23), inset 0 1px 0 #fff;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.panel.hidden { display: none; }
.logo-mark { font-size: 52px; filter: drop-shadow(0 5px 8px rgba(35,105,130,.18)); }
.eyebrow { margin: 4px 0 6px; font-size: 11px; letter-spacing: .22em; font-weight: 800; color: #3b91ad; }
h1 { margin: 0; font-size: clamp(35px, 8vw, 56px); line-height: .98; letter-spacing: .02em; }
h1 span { font-size: .43em; font-weight: 700; color: #4a8a88; }
.lead { margin: 18px 0; line-height: 1.8; font-weight: 650; }
.controls { display: grid; gap: 8px; margin: 18px 0; text-align: left; }
.controls div { display: grid; grid-template-columns: 7em 1fr; gap: 8px; padding: 9px 12px; border-radius: 13px; background: rgba(174, 229, 239, .34); }
.controls b { color: #27788b; }
.controls span { font-size: 13px; color: #416270; }
.buttons { display: grid; grid-template-columns: 1.35fr 1fr; gap: 10px; }
button { border: 0; border-radius: 999px; padding: 14px 18px; font: inherit; font-weight: 800; cursor: pointer; transition: transform .2s, filter .2s; }
button:hover { transform: translateY(-2px); filter: brightness(1.04); }
button:disabled { cursor: wait; opacity: .62; transform: none; }
.primary { color: #fff; background: linear-gradient(135deg, #3eb7c4, #5279dc); box-shadow: 0 10px 24px rgba(56,113,172,.25); }
.secondary { color: #316270; background: #e7f5f6; }
.compatibility { min-height: 1.5em; margin: 12px 0 0; font-size: 12px; color: #65808c; }
.desktop-help { position: fixed; z-index: 10; left: 50%; bottom: 16px; transform: translateX(-50%); padding: 9px 14px; border-radius: 999px; color: #244a5b; background: rgba(255,255,255,.76); backdrop-filter: blur(10px); font-size: 12px; white-space: nowrap; }
.hidden { display: none !important; }
.toast { position: fixed; z-index: 30; left: 50%; top: 9%; transform: translate(-50%, -12px); opacity: 0; padding: 12px 20px; border-radius: 999px; color: #244f56; background: rgba(255,255,244,.9); box-shadow: 0 8px 30px rgba(28,87,107,.18); font-weight: 800; transition: opacity .35s, transform .35s; pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 560px) {
  .panel { padding: 22px 18px 18px; border-radius: 22px; }
  .controls div { grid-template-columns: 6em 1fr; }
  .buttons { grid-template-columns: 1fr; }
  .desktop-help { width: calc(100% - 24px); text-align: center; white-space: normal; }
}