@import "https://fonts.googleapis.com/css2?family=M+PLUS+1+Code:wght@100..700&family=M+PLUS+1p:wght@100;300;400;500;700;800;900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap";@import "https://use.fontawesome.com/releases/v7.2.0/css/all.css";:root{--font-sans:"Ubuntu", "M PLUS 1p", sans-serif;--font-mono:"M PLUS 1 Code", monospace;--song-image-size:100px;--bg-l:14%;--bg-c:.02;--bg-h:260;--fg-l:93%;--fg-c:.02;--fg-h:260;--accent-l:75%;--accent-c:.35;--accent-h:245;--border-l:30%;--border-c:.05;--border-h:260;--color-bg:#050911;--color-fg:#e0e8f6;--color-accent:#40b6ff;--color-border:#1f2e47;--color-list-bg:#070b14;--color-droppable-hover:#11161f;--label-width:3rem;--gap:.5rem}*,:before,:after{box-sizing:border-box}html,body{font-family:var(--font-sans);background-color:var(--color-bg);color:var(--color-fg);flex-direction:column;align-items:center;min-height:100vh;margin:0;padding:0;line-height:1.5;display:flex}code,kbd,pre,samp,.monospace{font-family:var(--font-mono)}a{color:var(--color-accent);font-weight:500;text-decoration:none}a:hover{color:#0092d9}button{background-color:var(--color-list-bg);color:var(--color-fg);cursor:pointer;border:1px solid #0000;border-radius:8px;padding:.6em 1.2em;font-family:inherit;font-size:1em;font-weight:500;transition:border-color .25s}button:hover{border-color:var(--color-accent)}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}header h1{text-align:center;margin:.5em 0;font-size:3.2em;line-height:1.1}main{flex:1;width:100%;max-width:1280px;padding:1rem 2rem}.settings-container{margin-bottom:1.5rem}.settings-container .setting-items{gap:var(--gap);flex-direction:column;align-items:center;width:400px;margin:0 auto;padding:0;list-style:none;display:flex}.settings-container .setting-item{justify-content:space-between;align-items:center;gap:.5rem;width:100%;display:flex}.settings-container select,.settings-container input[type=text],.settings-container input[type=number]{width:150px;max-width:100%}.tier-maker-container{gap:var(--gap);flex-direction:column;display:flex}.export-range-container{background-color:var(--color-bg);color:var(--color-fg);font-family:var(--font-sans);border:1px solid var(--color-border);width:100%;max-width:100vw;padding:1rem}.description{text-align:center;margin-bottom:1rem}.description h2,.description p{margin:.25rem 0}.tier-table{gap:var(--gap);flex-direction:column;max-width:100vw;display:flex;overflow-x:auto}.tier-table .level{align-items:stretch;gap:var(--gap);flex-direction:row;display:flex}.tier-table .label{flex:0 0 var(--label-width);background-color:var(--color-list-bg);border:1px solid var(--color-border);justify-content:center;align-items:center;display:flex}.tier-table .label p{text-align:center;margin:0}.tier-table .list{gap:var(--gap);min-width:0;min-height:var(--song-image-size);padding:var(--gap);background-color:var(--color-list-bg);border:1px dashed var(--color-border);flex-wrap:wrap;flex:auto;display:flex}.unassigned-songs{gap:var(--gap);padding:var(--gap);background-color:var(--color-list-bg);border:1px dashed var(--color-border);flex-wrap:wrap;width:100%;max-width:100vw;display:flex}img.song{height:var(--song-image-size);aspect-ratio:1;object-fit:cover;flex-shrink:0;width:auto}img.song[data-kind=known]{border:4px solid #fff}img.song[data-kind=promoted]{border:4px solid red}img.song[data-kind=demoted]{border:4px solid #0ff}img.song[data-kind=added]{border:4px solid #90ee90}span.circle:after{content:"●"}span.circle[data-kind=known]:after{color:#fff}span.circle[data-kind=promoted]:after{color:red}span.circle[data-kind=demoted]:after{color:#0ff}span.circle[data-kind=added]:after{color:#90ee90}.export-share-buttons-container{margin-top:1.5rem}.export-share-buttons-container .buttons-container{gap:var(--gap);justify-content:center;display:flex}.export-share-buttons-container button{padding:.5rem;font-size:1.2rem}footer{text-align:center;padding:1rem 0}footer small{color:var(--color-fg)}