:root{color-scheme:light;font:17px/1.5 system-ui,-apple-system,BlinkMacSystemFont,sans-serif;color:#25213c;background:#f7f5fc}
*{box-sizing:border-box}body{margin:0;min-height:100dvh;display:grid;place-items:center;padding:24px 20px;padding-bottom:max(24px,env(safe-area-inset-bottom))}
main{width:100%;max-width:420px}header{display:flex;align-items:center;justify-content:center;gap:12px}header img{border-radius:15px}h1{font-size:2rem;letter-spacing:-.06em;margin:0}.intro{text-align:center;color:#6e6682;margin:12px 0 32px}
button,input{font:inherit}button{cursor:pointer;border:0}button:disabled{opacity:.5;cursor:wait}button:focus-visible,input:focus-visible{outline:3px solid #2170cd;outline-offset:5px}[hidden]{display:none!important}
.action{width:100%;min-height:166px;border-radius:26px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;margin:18px 0;box-shadow:0 8px 24px #392c5d0c;transition:transform .12s,background .12s}
.action strong{font-size:1.45rem;letter-spacing:.06em}.action span{font-size:1.4rem}.action small{font-size:.85rem;font-weight:400}.listen{background:#e8e2fa;color:#45338b}.record{background:#5b43cc;color:white;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.record[data-active=true]{background:#b33758;transform:scale(.98)}
.hint{font-size:.82rem;color:#756e85;text-align:center;margin:20px 0}#status{min-height:3.5em;text-align:center;white-space:pre-line;font-weight:500;margin-top:26px}label{display:block;font-weight:600}input{width:100%;padding:14px;border:1px solid #9b93b0;border-radius:12px;margin:8px 0 16px}.unlock-button{width:100%;background:#5b43cc;color:white;border-radius:12px;padding:15px}
@media(prefers-reduced-motion:reduce){.action{transition:none}}@media(max-height:650px){.action{min-height:125px}.intro{margin-bottom:20px}}
.history{margin-top:32px;border-top:1px solid #ded8ed;padding-top:20px}.history-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.history h2{font-size:1.2rem;margin:0}.history-heading button,.history-list button{background:#e8e2fa;color:#45338b;border-radius:12px;min-height:44px;padding:9px 16px;font-weight:600}.history-note,#history-status{font-size:.82rem;color:#756e85;margin:8px 0}.history-list{padding:0;margin:16px 0;list-style:none}.history-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;background:white;border:1px solid #e8e2fa;border-radius:16px;padding:14px;margin:10px 0}.history-list strong,.history-list time{display:block}.history-list time{font-size:.82rem;color:#756e85;margin-top:3px}.history-list button[aria-pressed=true]{background:#5b43cc;color:white}