diff --git a/static/index.html b/static/index.html
new file mode 100644
index 0000000..bb6c77e
--- /dev/null
+++ b/static/index.html
@@ -0,0 +1,349 @@
+
+
+
+
+
+
+ s1ne
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/styles.css b/static/styles.css
new file mode 100644
index 0000000..c6a7892
--- /dev/null
+++ b/static/styles.css
@@ -0,0 +1,1030 @@
+:root{
+ --bg:#000;
+ --surface:#131213;
+ --surface-2:#232323;
+ --surface-hover:#010010;
+ --text:#f2f2f2;
+ --text-strong:#f5f5f5;
+ --muted:#c9c9c9;
+ --border:#707070;
+ --border-strong:#808080;
+ --focus:#817567;
+ --seek-accent:#817567;
+ --page-max:975px;
+ --player-height:95px;
+}
+
+*{
+ box-sizing:border-box;
+ border-radius:0!important;
+}
+
+html,
+body{
+ margin:0;
+ min-height:100%;
+ background:var(--bg);
+}
+
+body{
+ min-height:100vh;
+ color:var(--text);
+ font-family:"Courier New",Courier,monospace;
+ font-size:13px;
+ line-height:1.2;
+}
+
+button,
+input,
+audio{
+ font-family:inherit;
+}
+
+button{
+ cursor:pointer;
+}
+
+.page{
+ width:min(var(--page-max),calc(100% - 32px));
+ min-height:100vh;
+ max-height:100vh;
+ margin:0 auto;
+ padding:32px 0 calc(var(--player-height) + 56px);
+}
+
+.page.page-home{
+ display:flex;
+ flex-direction:column;
+}
+
+.view-tabs{
+ display:flex;
+ gap:8px;
+ margin-bottom:13px;
+}
+
+.tab-button{
+ padding:6px 10px;
+ border:0;
+ background:transparent;
+ color:var(--text);
+}
+
+.tab-button.active{
+ background:color-mix(in srgb,var(--seek-accent) 11%,transparent);
+}
+
+.icon-tab-button{
+ display:inline-flex;
+ align-items:center;
+ justify-content:center;
+ width:34px;
+ height:30px;
+ padding:4px;
+}
+
+.icon-tab-button svg{
+ width:20px;
+ height:20px;
+ fill:currentColor;
+}
+
+.search-hero{
+ display:flex;
+ flex:1;
+ align-items:center;
+ justify-content:center;
+ min-height:calc(100vh - 220px);
+}
+
+.search-hero.is-compact{
+ min-height:0;
+}
+
+.search-hero-inner{
+ width:100%;
+ max-width:780px;
+}
+
+.page-home .search-form-hero{
+ transform:translateY(-4vh);
+}
+
+.search-input{
+ width:100%;
+ height:40px;
+ padding:8px 10px;
+ border:1px solid #ffffff22;
+ outline:none;
+ background:transparent;
+ color:var(--text);
+ font-size:13px;
+ margin-bottom:3px;
+ margin-top:3px;
+}
+
+.search-input:focus{
+ border-color:color-mix(in srgb,var(--seek-accent) 45%,transparent);
+ outline-offset:2px;
+}
+
+.status{
+ display:flex;
+ align-items:center;
+ min-height:26px;
+ color:var(--muted);
+}
+
+.results-section{
+ width:100%;
+ overflow:auto;
+}
+
+.results-section-home{
+ display:none;
+}
+
+.results-section-active{
+ display:block;
+ max-height:min(72vh,755px);
+}
+
+.results-table{
+ width:100%;
+ min-width:900px;
+ border-collapse:collapse;
+ table-layout:fixed;
+}
+button .play-button:hover{
+ border-color:#fff!important;
+ border:1px solid #fff!important;
+}
+.results-table thead th{
+ position:sticky;
+ top:0;
+ z-index:2;
+ background:var(--bg);
+}
+
+.results-table th,
+.results-table td{
+ padding:6px 7px;
+ text-align:left;
+ vertical-align:top;
+}
+
+.results-table th{
+ color:var(--muted);
+ font-weight:400;
+}
+
+.results-table tr:hover td{
+ background:color-mix(in srgb,var(--seek-accent) 12%,transparent);
+}
+
+.col-index{
+ width:36px;
+}
+
+.col-channel{
+ width:190px;
+}
+
+.col-duration{
+ width:67px;
+}
+
+.col-meta{
+ width:67px;
+}
+
+.col-play{
+ width:67px;
+ text-align:center!important;
+}
+
+.col-download{
+ width:33px;
+ padding-right:2px!important;
+ padding-left:2px!important;
+ text-align:center!important;
+}
+
+.col-fav{
+ width:33px;
+ padding-right:2px!important;
+ padding-left:2px!important;
+ text-align:center!important;
+}
+
+.col-playlist{
+ width:33px;
+ padding-right:2px!important;
+ padding-left:2px!important;
+ text-align:center!important;
+ white-space:nowrap;
+}
+
+.col-title,
+.col-channel{
+ overflow:hidden;
+}
+
+.empty{
+ padding:16px 8px!important;
+ color:var(--muted);
+}
+
+.link-button{
+ padding:0;
+ border:0;
+ background:transparent;
+ color:var(--text);
+ font-size:13px;
+ text-align:left;
+}
+
+.link-button:hover{
+ color:#f7f7f7;
+ text-decoration:underline;
+}
+
+.title-button{
+ display:inline-block;
+ max-width:100%;
+ overflow:hidden;
+ text-overflow:ellipsis;
+ white-space:nowrap;
+}
+
+.result-meta{
+ display:flex;
+ flex-wrap:wrap;
+ gap:6px;
+}
+
+.badge{
+ display:inline-block;
+ padding:4px 5px;
+ border:1px solid var(--border-strong);
+ background:rgba(9,5,11,0.07);
+ color:var(--text);
+ font-size:11px;
+ padding-left:-1px;
+ padding-right:-1px;
+}
+
+.badge.live{
+ border-color:#b15f5f;
+ background:#2a1717;
+ color:#ffd0d0;
+}
+
+.star-button,
+.download-button{
+ display:inline-flex;
+ align-items:center;
+ justify-content:center;
+ width:100%;
+ min-width:22px;
+ min-height:22px;
+ padding:0;
+ border:0;
+ background:transparent;
+ color:var(--muted);
+}
+
+.star-button{
+ font-size:19px;
+}
+
+.star-button.favorited{
+ color:#ffd96b;
+}
+
+.download-button svg{
+ width:17px;
+ height:17px;
+ fill:currentColor;
+}
+
+.download-button:hover{
+ color:var(--seek-accent);
+}
+
+.playlist-action-button{
+ display:inline-flex;
+ align-items:center;
+ justify-content:center;
+ min-width:18px;
+ height:20px;
+ margin:0 1px;
+ padding:0 3px;
+ border:0;
+ background:transparent;
+ color:var(--text);
+ font-size:15px;
+}
+
+.playlist-action-button:hover{
+ background:var(--surface-2);
+}
+
+.player{
+ position:fixed;
+ right:0;
+ bottom:0;
+ left:0;
+ z-index:100;
+ display:flex;
+ flex-direction:column;
+ align-items:center;
+ justify-content:center;
+ min-height:var(--player-height);
+ gap:.44rem;
+ padding:.65rem 1rem;
+ border-top:1px solid #02020233;
+ background:rgba(7,6,9,.55);
+}
+
+.player.hidden{
+ display:none;
+}
+
+.now-playing{
+ width:100%;
+ max-width:900px;
+ min-width:0;
+ text-align:center;
+}
+
+#playerTitle,
+#playerMeta{
+ width:100%;
+ overflow:hidden;
+ text-overflow:ellipsis;
+ white-space:nowrap;
+}
+
+#playerTitle{
+ font-weight:600;
+}
+
+#playerMeta{
+ margin-top:.18rem;
+ color:var(--muted);
+ font-size:.78rem;
+}
+
+.player-controls{
+ display:flex;
+ align-items:center;
+ justify-content:center;
+ width:100%;
+ max-width:1200px;
+ gap:.4rem;
+ margin-bottom:2px;
+}
+
+.queue-control-button{
+ display:flex;
+ align-items:center;
+ justify-content:center;
+ min-width:2.2rem;
+ height:2rem;
+ padding:0 .7rem;
+ border:1px solid var(--border);
+ background:rgba(255,255,255,.03);
+ color:var(--text);
+}
+
+.queue-control-button:hover{
+ background:rgba(255,255,255,.08);
+}
+
+.queue-control-button:disabled{
+ color:#555;
+ opacity:.45;
+}
+
+.queue-control-button.active{
+ border-color:var(--seek-accent);
+ color:var(--seek-accent);
+}
+
+.icon-control-button{
+ position:relative;
+ width:2.25rem;
+ min-width:2.25rem;
+ padding:0;
+}
+
+.play-button:hover{
+ border-color:#fff;
+}
+
+.icon-control-button svg{
+ width:17px;
+ height:17px;
+ fill:currentColor;
+}
+
+.primary-control{
+ width:2.5rem;
+ min-width:2.5rem;
+ height:2.25rem;
+ border-color:var(--text);
+}
+
+.primary-control .pause-icon{
+ display:none;
+}
+
+.primary-control.is-playing .play-icon{
+ display:none;
+}
+
+.primary-control.is-playing .play-icon:hover{
+ border-color:#fff;
+}
+.primary-control.is-playing .pause-icon{
+ display:block;
+}
+
+
+
+.mode-control.inactive{
+ border-color:#555;
+ color:#777;
+ opacity:.72;
+}
+
+.control-indicator{
+ position:absolute;
+ right:3px;
+ bottom:3px;
+ width:4px;
+ height:4px;
+ border:1px solid currentColor;
+}
+
+.mode-control.active .control-indicator{
+ border-color:var(--seek-accent);
+ background:var(--seek-accent);
+}
+
+.loop-one-icon{
+ display:none!important;
+}
+button .primary-icon:hover{
+ border-color:#fff;
+}
+
+#loopButton.loop-one .loop-all-icon{
+ display:none;
+}
+
+#loopButton.loop-one .loop-one-icon{
+ display:block!important;
+}
+
+.loop-one-number{
+ fill:var(--bg);
+ stroke:var(--seek-accent);
+ stroke-width:.45;
+}
+
+.player-seek{
+ flex:1;
+ min-width:133px;
+ height:20px;
+ margin:0;
+ appearance:none;
+ background:transparent;
+}
+
+.player-seek::-webkit-slider-runnable-track{
+ height:3px;
+ background:linear-gradient(
+ to right,
+ var(--seek-accent) 0,
+ var(--seek-accent) var(--progress,0%),
+ rgba(255,255,255,.14) var(--progress,0%),
+ rgba(255,255,255,.14) 100%
+ );
+}
+
+.player-seek::-webkit-slider-thumb{
+ width:12px;
+ height:12px;
+ margin-top:-4px;
+ appearance:none;
+ border:1px solid var(--border);
+ border-radius:50%!important;
+ background:var(--seek-accent);
+}
+
+.player-seek::-moz-range-track{
+ height:3px;
+ background:rgba(255,255,255,.14);
+}
+
+.player-seek::-moz-range-progress{
+ height:3px;
+ background:var(--seek-accent);
+}
+
+.player-seek::-moz-range-thumb{
+ width:12px;
+ height:12px;
+ border:1px solid var(--border);
+ border-radius:50%!important;
+ background:var(--seek-accent);
+}
+
+#currentTime,
+#duration{
+ width:3.5rem;
+ color:var(--muted);
+ font-size:.78rem;
+ text-align:center;
+}
+
+.player-volume{
+ width:95px;
+ height:20px;
+ appearance:none;
+ background:transparent;
+ padding-right:3px;
+ padding-left:3px;
+}
+
+.player-volume::-webkit-slider-runnable-track{
+ height:3px;
+ background:rgba(255,255,255,.1);
+}
+
+.player-volume::-webkit-slider-thumb{
+ width:12px;
+ height:12px;
+ margin-top:-4px;
+ appearance:none;
+ border:1px solid var(--border);
+ border-radius:50%!important;
+ background:var(--seek-accent);
+}
+
+.player-volume::-moz-range-track{
+ height:3px;
+ background:rgba(255,255,255,.1);
+}
+
+.player-volume::-moz-range-thumb{
+ width:12px;
+ height:12px;
+ border:1px solid var(--border);
+ border-radius:50%!important;
+ background:var(--seek-accent);
+}
+
+.seek-theme-picker{
+ position:relative;
+}
+
+.theme-picker-button{
+ color:var(--seek-accent);
+}
+
+.seek-theme-menu{
+ position:absolute;
+ right:0;
+ bottom:calc(100% + 7px);
+ z-index:220;
+ min-width:111px;
+ padding:4px;
+ border:1px solid var(--border-strong);
+ background:var(--surface);
+}
+
+.seek-theme-menu[hidden]{
+ display:none;
+}
+
+.seek-theme-option{
+ display:flex;
+ align-items:center;
+ width:100%;
+ gap:7px;
+ min-height:30px;
+ padding:5px 7px;
+ border:0;
+ background:transparent;
+ color:var(--text);
+ text-align:left;
+}
+
+.seek-theme-option:hover,
+.seek-theme-option[aria-selected="true"]{
+ background:var(--surface-hover);
+}
+
+.seek-color-swatch{
+ width:11px;
+ height:11px;
+ border:1px solid rgba(255,255,255,.7);
+ background:var(--swatch);
+}
+
+.scroll-sentinel{
+ display:flex;
+ align-items:center;
+ min-height:42px;
+ padding:10px 8px;
+ color:var(--muted);
+}
+
+.scroll-sentinel:empty{
+ display:none;
+}
+
+.scroll-sentinel.loading::after,
+tr.loading-row td::after{
+ display:inline-block;
+ width:1ch;
+ content:"";
+ animation:loading-dots 1s steps(4,end) infinite;
+}
+
+tr.loading-row td::before{
+ content:"> ";
+}
+
+@keyframes loading-dots{
+ 0%{content:""}
+ 25%{content:"."}
+ 50%{content:".."}
+ 75%,100%{content:"..."}
+}
+
+.queue-panel{
+ width:min(1000px,calc(100% - 22px));
+ margin:18px auto;
+ border:0px solid var(--border-strong);
+ background:var(--bg);
+}
+
+.queue-panel-header{
+ display:flex;
+ align-items:center;
+ justify-content:space-between;
+ gap:12px;
+ padding:10px 12px;
+ border-bottom:1px solid rgba(120,120,120,.3);
+}
+
+.queue-panel-actions{
+ display:flex;
+ gap:8px;
+}
+
+.queue-panel-actions select,
+.queue-panel-actions button{
+ padding:5px 7px;
+ border:1px solid var(--border-strong);
+ background:transparent;
+ color:var(--text);
+ font:inherit;
+ font-size:12px;
+}
+
+.queue-list{
+ display:flex;
+ flex-direction:column;
+ max-height:260px;
+ overflow:auto;
+}
+
+.queue-item{
+ display:flex;
+ align-items:flex-start;
+ gap:10px;
+ width:100%;
+ padding:9px 12px;
+ border:0;
+ border-bottom:0px solid rgba(120,120,120,.2);
+ background:transparent;
+ color:var(--text);
+ text-align:left;
+}
+
+.queue-item:hover{
+ background:var(--surface-hover);
+}
+
+.queue-item-index{
+ width:24px;
+ color:var(--muted);
+}
+
+.queue-item-main{
+ display:flex;
+ flex-direction:column;
+ min-width:0;
+}
+
+.queue-item-title,
+.queue-item-meta{
+ overflow:hidden;
+ text-overflow:ellipsis;
+ white-space:nowrap;
+}
+
+.queue-item-meta{
+ color:var(--muted);
+ font-size:11px;
+}
+
+.queue-empty{
+ padding:14px 12px;
+ color:var(--muted);
+}
+
+#audioPlayer{
+ display:none;
+}
+
+
+@media (max-width:700px){
+ :root{
+ --player-height:164px;
+ }
+
+ .page{
+ width:100%;
+ padding:18px 10px calc(var(--player-height) + 36px);
+ }
+
+ .search-hero{
+ min-height:calc(100vh - 250px);
+ }
+
+ .search-input{
+ height:42px;
+ font-size:16px;
+ }
+
+ .results-section-active{
+ max-height:min(54dvh,620px);
+ overflow-x:hidden;
+ }
+
+ .results-table{
+ min-width:0;
+ }
+
+ .results-table th,
+ .results-table td{
+ padding:8px 4px;
+ }
+
+ .results-table td:nth-child(3),
+ .results-table th:nth-child(3),
+ .results-table td:nth-child(5),
+ .results-table th:nth-child(5){
+ display:none;
+ }
+
+ .col-index{ width:28px; }
+ .col-duration{ width:46px; }
+ .col-play{ width:42px; }
+ .col-download{ width:30px; }
+ .col-fav{ width:28px; }
+ .col-playlist{ width:52px; }
+
+ .title-button{
+ display:-webkit-box;
+ overflow:hidden;
+ white-space:normal;
+ -webkit-box-orient:vertical;
+ -webkit-line-clamp:2;
+ }
+
+ .player{
+ padding:.56rem .56rem;
+ overflow:hidden;
+ }
+
+ .player-controls{
+ display:flex;
+ align-items:center;
+ justify-content:center;
+ flex-wrap:wrap;
+ gap:.35rem;
+ width:100%;
+ min-width:0;
+ }
+
+ .queue-control-button{
+ min-width:2.05rem;
+ height:1.95rem;
+ padding:0 .55rem;
+ flex:0 0 auto;
+ }
+
+ .icon-control-button{
+ width:2.05rem;
+ min-width:2.05rem;
+ }
+
+ .primary-control{
+ width:2.25rem;
+ min-width:2.25rem;
+ height:2.05rem;
+ }
+
+ .icon-control-button svg{
+ width:15px;
+ height:15px;
+ }
+
+ .player-volume{
+ display:none !important;
+ }
+
+ #currentTime,
+ #duration{
+ flex:0 0 auto;
+ width:2.85rem;
+ min-width:2.85rem;
+ font-size:.72rem;
+ text-align:center;
+ }
+
+ .seek-theme-picker{
+ flex:0 0 auto;
+ white-space:nowrap;
+ }
+
+ .theme-picker-button{
+ min-width:2rem;
+ height:1.95rem;
+ padding:0 .4rem;
+ }
+
+ .player-seek{
+ order:999;
+ flex:0 0 100%;
+ width:100%;
+ min-width:100%;
+ max-width:100%;
+ height:28px;
+ margin:0;
+ }
+
+ .queue-panel{
+ width:calc(100% - 20px);
+ }
+
+ .queue-panel-header{
+ flex-direction:column;
+ align-items:flex-start;
+ }
+
+ .queue-panel-actions{
+ width:100%;
+ }
+
+ .queue-panel-actions select,
+ .queue-panel-actions button{
+ min-height:40px;
+ }
+}
+
+@media (max-width:420px){
+ :root{
+ --player-height:156px;
+ }
+
+ .page{
+ padding:14px 8px calc(var(--player-height) + 30px);
+ }
+
+ .player{
+ padding:.5rem .42rem;
+ gap:.32rem;
+ }
+
+ .player-controls{
+ gap:.22rem;
+ }
+
+ .queue-control-button{
+ min-width:1.85rem;
+ height:1.8rem;
+ padding:0 .38rem;
+ }
+
+ .icon-control-button{
+ width:1.85rem;
+ min-width:1.85rem;
+ }
+
+ .primary-control{
+ width:2rem;
+ min-width:2rem;
+ height:1.9rem;
+ }
+
+ .icon-control-button svg{
+ width:14px;
+ height:14px;
+ }
+
+ #currentTime,
+ #duration{
+ width:2.35rem;
+ min-width:2.35rem;
+ font-size:.66rem;
+ }
+
+ .theme-picker-button{
+ min-width:1.8rem;
+ height:1.8rem;
+ padding:0 .28rem;
+ }
+
+ .player-seek{
+ height:26px;
+ }
+
+ #playerTitle{
+ font-size:.86rem;
+ }
+
+ #playerMeta{
+ font-size:.68rem;
+ }
+}
+
+.drag-handle{
+ display:inline-flex;
+ align-items:center;
+ justify-content:center;
+ min-width:18px;
+ margin-right:8px;
+ color:var(--muted);
+ cursor:grab;
+ user-select:none;
+}
+
+.drag-handle:active{
+ cursor:grabbing;
+}
+
+.results-table tr.dragging td{
+ opacity:.45;
+}
+
+.results-table tr.drag-over td{
+ background:color-mix(in srgb,var(--seek-accent) 12%,transparent);
+}
+/* keep title cell on one line */
+.results-table td.col-title {
+ white-space: nowrap;
+}
+
+/* make the title button shrink safely instead of wrapping */
+.results-table td.col-title .title-button {
+ display: inline-block;
+ max-width: calc(100% - 24px);
+ overflow: hidden;
+ text-overflow: ellipsis;
+ vertical-align: middle;
+ white-space: nowrap;
+}
+
+/* keep drag handle visible and clickable */
+.results-table td.col-title .drag-handle {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 18px;
+ margin-right: 8px;
+ flex: 0 0 auto;
+ cursor: grab;
+ user-select: none;
+ vertical-align: middle;
+}
+
+.results-table td.col-title .drag-handle:active {
+ cursor: grabbing;
+}
+
+.results-table tr.dragging {
+ opacity: 0.6;
+}
+
+.results-table tr.drag-over {
+ outline: 1px solid rgba(255, 255, 255, 0.2);
+ outline-offset: -1px;
+}