*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;background:#000;color:#fff;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:13px;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}body{display:flex;flex-direction:column}#pad{flex:1;min-height:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));grid-auto-rows:1fr;gap:1px;background:#1a1a1a}.big{position:relative;display:grid;place-items:center;background:#000;border:none;color:#555;font:inherit;font-size:clamp(16px,3vw,28px);letter-spacing:.2em;cursor:pointer;transition:background .4s ease,color .4s ease}.big:hover{color:#aaa}.big:active{background:#1a1a1a;transition:none}.big.active{color:#fff}.big.playing{background:#0a0a0a}.big:disabled{opacity:.3;cursor:default}.big .count{position:absolute;bottom:12px;right:14px;font-size:11px;letter-spacing:.1em;color:#444}#playlist{display:flex;align-items:flex-end;gap:24px;padding:16px 20px 20px;border-top:1px solid #1a1a1a}#tracks{flex:1;list-style:none;max-height:30vh;overflow-y:auto}#tracks li{padding:4px 0;color:#555;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#tracks li:hover{color:#aaa}#tracks li.active{color:#fff}#tracks li.active:before{content:"▸ "}#tracks .empty{cursor:default}@media(max-width:600px){#pad{grid-template-columns:repeat(3,1fr)}.big.water,.big.toeter{grid-column:1 / -1}.big.ja,.big.misschien,.big.nee{font-size:14px;letter-spacing:.1em}}