@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&family=Caveat:wght@500&family=Archivo:wght@400;500&display=swap');
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{background:#0e0f11;color:#e9e6dd;font-family:'Archivo',system-ui,sans-serif;
 display:flex;align-items:center;justify-content:center;min-height:100vh;padding:32px 22px;overflow-x:hidden;}
.app{width:100%;max-width:420px;text-align:center;}
.mark{font-family:'Cormorant Garamond',serif;font-size:15px;letter-spacing:.5em;text-transform:uppercase;
 color:#6b7079;padding-left:.5em;margin-bottom:38px;}
.num{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:#8a8d92;margin-bottom:6px;}
.title{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:30px;line-height:1.2;color:#e9e6dd;
 min-height:38px;margin-bottom:34px;}
.play{width:96px;height:96px;border-radius:50%;border:1.5px solid #bd7f88;background:transparent;color:#e9e6dd;
 cursor:pointer;display:flex;align-items:center;justify-content:center;margin:0 auto 8px;transition:.2s;-webkit-tap-highlight-color:transparent;}
.play:active{transform:scale(.96);} .play svg{width:34px;height:34px;fill:#e9e6dd;}
.play.pulse{animation:pulse 1.8s ease-in-out infinite;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(189,127,136,.4);}50%{box-shadow:0 0 0 14px rgba(189,127,136,0);}}
.hint{font-family:'Caveat',cursive;font-size:17px;color:#6b7079;height:22px;margin-bottom:28px;}
.list{border-top:1px solid #26282e;}
.row{display:flex;justify-content:space-between;align-items:center;padding:13px 4px;border-bottom:1px solid #1c1e21;
 cursor:pointer;font-size:13px;color:#8a8d92;-webkit-tap-highlight-color:transparent;}
.row .l{letter-spacing:.16em;} .row.on{color:#bd7f88;} .row.on .l::before{content:'▶ ';font-size:10px;}
.foot{margin-top:26px;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:#4a4d52;}