:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Malgun Gothic", sans-serif; color: #173d34; background: #f6f4ec; }
* { box-sizing: border-box; }
body { margin: 0; -webkit-tap-highlight-color: transparent; }
button { font: inherit; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
button:focus-visible { outline: 4px solid #237cbd; outline-offset: 7px; }
.kiosk { min-height: 100vh; min-height: 100svh; padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); display: grid; place-items: center; }
.bell { width: min(300px, 78vw, 78vh); width: min(300px, 78vw, 78svh); aspect-ratio: 1; border-radius: 50%; border: 1px solid #e9ba48; background: #f9cf64; color: #173d34; box-shadow: 0 8px 0 #dcae43, 0 16px 30px #6a572013, inset 0 2px 0 #fff2c3; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: transform .12s, box-shadow .12s, background .12s; }
.bell:active, .bell.is-ringing { transform: translateY(5px); box-shadow: 0 3px 0 #dcae43, 0 8px 18px #6a572013; background: #fbd77a; }
.bell-icon { width: 92px; height: 92px; margin-bottom: 10px; }
.sound-lines { opacity: 0; }
.is-ringing .sound-lines { opacity: 1; }
.is-ringing .bell-icon { animation: ring .24s ease-in-out 4 alternate; }
#bell-label { font-size: 26px; font-weight: 850; letter-spacing: -.05em; }
.bell-hint { font-size: 12px; margin-top: 8px; opacity: .68; }
@keyframes ring { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
@media (max-height: 400px) { .bell-icon { width: 64px; height: 64px; margin-bottom: 4px; } #bell-label { font-size: 22px; } .bell-hint { font-size: 10px; margin-top: 4px; } }
@media (prefers-reduced-motion: reduce) { .bell { transition: none; } .is-ringing .bell-icon { animation: none; } }