:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; background: #153d37; color: #fff7e8; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
body { background: radial-gradient(ellipse at 65% 30%, #316b5c 0, #183d37 52%, #102d29 100%); }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { font: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 3px solid #ffc862; outline-offset: 4px; }
.preview { height: 100%; height: 100dvh; display: flex; align-items: center; justify-content: center; gap: clamp(36px, 7vw, 110px); padding: 18px max(18px, env(safe-area-inset-right)) 18px max(18px, env(safe-area-inset-left)); }
.notes { width: 340px; flex: 0 0 340px; }
.eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 2.4px; color: #94ceba; margin: 0 0 26px; }
h1 { font-size: 42px; line-height: 1.3; letter-spacing: -2px; margin: 0 0 24px; }
.intro { font-size: 15px; line-height: 1.9; color: #b9d5c7; margin-bottom: 34px; }
.beats { list-style: none; margin: 0; padding: 0; }
.beats li { display: flex; gap: 17px; padding: 17px 0; opacity: .4; transition: opacity .35s; }
.beats li.active { opacity: 1; }
.beats li > span { color: #ffc970; font-size: 12px; padding-top: 3px; font-weight: 800; }
.beats strong { font-size: 16px; }
.beats p { font-size: 12px; color: #b9d5c7; margin: 7px 0 0; line-height: 1.6; }
.note { color: #8db6a9; font-size: 11px; line-height: 1.8; margin: 34px 0 16px; }
.pilot-link { color: #c7ddcb; font-size: 12px; text-underline-offset: 4px; }
.phone { width: min(calc((100dvh - 36px) * 853 / 1844), 440px); aspect-ratio: 853 / 1844; flex-shrink: 0; position: relative; border-radius: 28px; overflow: hidden; box-shadow: 0 25px 80px #0006, 0 0 0 1px #e0ffee30; background: #aad7bc; }
canvas { display: block; width: 100%; height: 100%; }
.control { position: absolute; border: 0; min-height: 44px; min-width: 44px; display: flex; align-items: center; justify-content: center; color: #633919; }
.sound { left: 37%; top: 5.6%; width: 14.2%; height: 3.4%; border: 1px solid #d6b891; border-radius: 15px; background: linear-gradient(#fff3d6, #ead7ac); font-size: clamp(8px, 2.7vw, 11px); font-weight: 800; box-shadow: inset 0 1px 1px #fff9; }
.sound[aria-pressed="true"] { color: #156956; background: #def2cb; }
.pause { right: 1.8%; top: 5.5%; width: 8.3%; height: 3.5%; border-radius: 13px; border: 2px solid #ffe4b2; background: linear-gradient(#be5b29, #84351b); box-shadow: inset 0 2px 2px #fbb77b, 0 2px 3px #623b3670; color: #fff7df; font-weight: 800; font-size: 22px; line-height: 1; }
.restart { left: 70.8%; top: 64.2%; width: 26%; height: 5.8%; border-radius: 17px; border: 2px solid #ffe8b2; background: linear-gradient(#ffbe56, #ec8738); color: #713d1c; box-shadow: inset 0 2px 1px #fff8, inset 0 -4px 2px #c6692b99, 0 3px 4px #573d3260; flex-direction: column; gap: 2px; font-size: clamp(12px, 4.3vw, 20px); font-weight: 900; }
.restart small { font-size: 9px; font-weight: 700; opacity: .8; }
.restart:active { filter: brightness(.94); }
.loading { position: absolute; inset: 0; display: grid; place-items: center; color: #173f34; background: #e4f2dc; font-weight: 700; padding: 20px; text-align: center; }
.loading[hidden], .pause-overlay[hidden] { display: none; }
.pause-overlay { position: absolute; left: 12%; right: 12%; top: 44%; padding: 20px; background: #fff6e9f5; color: #644126; border: 2px solid #d4aa72; border-radius: 22px; display: flex; align-items: center; flex-direction: column; gap: 15px; box-shadow: 0 12px 32px #153d3755; }
.pause-overlay span { font-size: 15px; font-weight: 800; }
.pause-overlay button { min-height: 44px; padding: 0 26px; color: #fff8e9; background: #168678; border: 0; border-radius: 12px; font-weight: 800; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 760px) {
  .notes { display: none; }
  .preview { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
  .phone { width: min(calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right)), calc((100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 853 / 1844)); border-radius: 0; box-shadow: none; }
}
@media (max-height: 670px) and (min-width: 761px) { .notes { transform: scale(.85); transform-origin: right center; margin-left: -40px; } }
@media (max-height: 690px) and (max-width: 1000px) {
  .notes { display: none; }
  .preview { padding: env(safe-area-inset-top) 0 calc(64px + env(safe-area-inset-bottom)); }
  .phone { width: min(100vw, calc((100dvh - 64px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 853 / 1844)); border-radius: 0; overflow: visible; }
  .control { position: fixed; top: auto; bottom: calc(10px + env(safe-area-inset-bottom)); height: 44px; width: 84px; white-space: nowrap; }
  .sound { left: calc(50% - 140px); font-size: 11px; }
  .pause { left: calc(50% - 42px); right: auto; }
  .restart { left: calc(50% + 56px); font-size: 14px; border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }