:root{--paper: #efdcb4;--paper-deep: #e6cd9b;--card: #fbf4e1;--card-edge: #f3e7c8;--ink: #2a1c10;--ink-soft: #6b513a;--ink-faint: rgba(42, 28, 16, .55);--orange: #e8551f;--orange-bright: #ff6a2b;--mustard: #f3b229;--teal: #1f8a86;--rec: #d8392b;--hard-shadow: 5px 5px 0 var(--ink);--hard-shadow-sm: 3px 3px 0 var(--ink);--radius: 6px;--font-display: "Fraunces", Georgia, serif;--font-ui: "Bricolage Grotesque", system-ui, sans-serif;--font-mono: "Space Mono", ui-monospace, monospace}*{box-sizing:border-box}body{margin:0;min-height:100%;font-family:var(--font-ui);font-weight:500;color:var(--ink);background-color:var(--paper);background-image:radial-gradient(rgba(42,28,16,.05) 1px,transparent 1.4px),linear-gradient(180deg,var(--paper-deep) 0%,var(--paper) 38%,var(--paper) 100%);background-size:18px 18px,100% 100%;background-attachment:fixed;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body:after{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.5;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E")}code{font-family:var(--font-mono)}*{scrollbar-width:thin;scrollbar-color:var(--orange) transparent}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--orange);border:2px solid var(--card);border-radius:20px}::-webkit-scrollbar-track{background:transparent}:focus-visible{outline:3px solid var(--teal);outline-offset:2px}.onbeat{min-height:100%;display:flex;flex-direction:column}.masthead{position:relative;overflow:hidden;padding:3.2rem 1.5rem 2.9rem;text-align:center;background:var(--ink);color:var(--card);border-bottom:4px solid var(--ink);box-shadow:inset 0 -10px #00000040}.masthead-sun{position:absolute;left:50%;top:52%;width:1400px;height:1400px;transform:translate(-50%,-50%);background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(243,178,41,.16) 0deg 7deg,transparent 7deg 14deg);-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 0%,transparent 62%);mask-image:radial-gradient(circle at 50% 50%,#000 0%,transparent 62%);animation:sun-spin 90s linear infinite;pointer-events:none}@keyframes sun-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}.masthead-kicker{position:relative;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.42em;text-indent:.42em;color:var(--mustard);margin-bottom:.7rem}.wordmark{position:relative;font-family:var(--font-display);font-optical-sizing:auto;font-variation-settings:"SOFT" 60,"WONK" 0;font-weight:900;font-size:clamp(3.4rem,11vw,7.5rem);line-height:.9;letter-spacing:-.02em;color:var(--card);text-shadow:4px 4px 0 var(--orange),8px 8px 0 rgba(0,0,0,.35)}.wordmark-beat{color:var(--mustard);font-style:italic}.masthead-tagline{position:relative;margin-top:.9rem;font-family:var(--font-mono);font-size:.82rem;letter-spacing:.12em;color:#fbf4e1b8}.App{flex:1;width:100%;max-width:1180px;margin:0 auto;padding:0 1.5rem 5rem}.App-playlist{display:flex;align-items:flex-start;justify-content:center;gap:1.8rem;width:100%}@media only screen and (max-width:1020px){.App-playlist{flex-direction:column;align-items:stretch}}.SearchBar{position:relative;width:100%;max-width:660px;margin:0 auto;padding:3.4rem 0 3.2rem;display:flex;flex-direction:column;align-items:center}.SearchBar-tag{font-family:var(--font-mono);font-weight:700;font-size:.72rem;letter-spacing:.32em;text-indent:.32em;color:var(--ink);background:var(--mustard);padding:.28rem .7rem;border:2px solid var(--ink);border-radius:3px;transform:rotate(-2deg);margin-bottom:-.7rem;z-index:2;box-shadow:var(--hard-shadow-sm)}.SearchBar-console{display:flex;width:100%;gap:.7rem;padding:.7rem;background:var(--card);border:3px solid var(--ink);border-radius:var(--radius);box-shadow:var(--hard-shadow)}.SearchBar input{flex:1;min-width:0;padding:.95rem 1.1rem;border:2px solid var(--ink);border-radius:4px;background:var(--paper);color:var(--ink);font-family:var(--font-mono);font-size:1rem;letter-spacing:.01em}.SearchBar input::placeholder{color:var(--ink-faint)}.SearchBar input:focus{outline:none;background:#fff;box-shadow:inset 0 0 0 2px var(--teal)}.SearchButton{cursor:pointer;flex-shrink:0;padding:0 1.7rem;border:2px solid var(--ink);border-radius:4px;background:var(--orange);color:var(--card);font-family:var(--font-ui);font-weight:800;font-size:.92rem;letter-spacing:.14em;box-shadow:var(--hard-shadow-sm);transition:transform .08s ease,box-shadow .08s ease,background .2s ease}.SearchButton:hover{background:var(--orange-bright)}.SearchButton:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}.SearchResults{width:50%;max-height:760px;overflow-y:auto;padding:1.3rem 1.4rem 1.6rem;background:var(--card);border:3px solid var(--ink);border-radius:var(--radius);box-shadow:var(--hard-shadow)}.panel-head{position:sticky;top:-1.3rem;margin:-1.3rem -1.4rem 1.1rem;padding:1rem 1.4rem .85rem;display:flex;align-items:baseline;justify-content:space-between;background:var(--card);border-bottom:2px dashed var(--ink-faint);z-index:3}.panel-head h2{font-family:var(--font-display);font-optical-sizing:auto;font-variation-settings:"SOFT" 50;font-weight:800;font-size:1.9rem;letter-spacing:-.01em;color:var(--ink)}.panel-count{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;color:var(--card);background:var(--teal);padding:.25rem .55rem;border-radius:3px}.SearchResults-empty{padding:2.4rem .4rem;font-family:var(--font-mono);font-size:.9rem;color:var(--ink-soft);text-align:center}@media only screen and (max-width:1020px){.SearchResults{width:100%;margin-bottom:1.8rem}}.TrackList{width:100%;display:flex;flex-direction:column;gap:.5rem}.Track{display:flex;align-items:center;gap:.85rem;padding:.6rem .7rem;background:var(--paper);border:2px solid var(--ink);border-radius:5px;transition:transform .12s ease,box-shadow .12s ease,background .12s ease}.Track:hover{background:var(--card-edge);transform:translate(-2px,-2px);box-shadow:var(--hard-shadow-sm)}.Track-num{flex-shrink:0;width:1.9rem;font-family:var(--font-mono);font-weight:700;font-size:.92rem;color:var(--orange);text-align:center}.Track-information{flex-grow:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:.18rem}.Track-information h3{font-family:var(--font-display);font-optical-sizing:auto;font-weight:600;font-size:1.06rem;line-height:1.15;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Track-information p{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.01em;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Track-sep{color:var(--orange);font-weight:700}.Track-action{cursor:pointer;flex-shrink:0;width:2.3rem;height:2.3rem;display:grid;place-items:center;border:2px solid var(--ink);border-radius:50%;font-family:var(--font-ui);font-weight:800;font-size:1.4rem;line-height:1;color:var(--card);box-shadow:var(--hard-shadow-sm);transition:transform .08s ease,box-shadow .08s ease,filter .15s ease}.Track-action.is-add{background:var(--teal)}.Track-action.is-remove{background:var(--rec)}.Track-action:hover{filter:brightness(1.08)}.Track-action:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}.Playlist{display:flex;flex-direction:column;width:42%;max-height:760px;padding:1.4rem 1.4rem 1.6rem;background:var(--card);border:3px solid var(--ink);border-radius:var(--radius);box-shadow:var(--hard-shadow)}.cassette{position:relative;flex-shrink:0;height:118px;margin-bottom:1.1rem;padding:1.1rem;background:var(--orange);border:3px solid var(--ink);border-radius:8px;box-shadow:inset 0 0 0 4px #0000001f}.cassette-screw{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--ink)}.cassette-screw.tl{top:7px;left:7px}.cassette-screw.tr{top:7px;right:7px}.cassette-screw.bl{bottom:7px;left:7px}.cassette-screw.br{bottom:7px;right:7px}.cassette-window{height:100%;display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:0 1.4rem;background:var(--card);border:2px solid var(--ink);border-radius:5px}.reel{position:relative;width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 50% 50%,var(--ink) 0 9px,transparent 9px),repeating-conic-gradient(var(--ink) 0deg 12deg,var(--paper-deep) 12deg 24deg);border:3px solid var(--ink);animation:reel-spin 3.5s linear infinite}@keyframes reel-spin{to{transform:rotate(360deg)}}.tape{flex:1;height:7px;background:var(--ink);border-radius:4px}.Playlist-label{display:flex;align-items:stretch;flex-shrink:0;margin-bottom:1rem;cursor:text;border:2px solid var(--ink);border-radius:4px;overflow:hidden;background:var(--card);box-shadow:var(--hard-shadow-sm);transition:box-shadow .12s ease,background .12s ease}.Playlist-label:hover{background:#fff}.Playlist-label:focus-within{background:#fff;box-shadow:0 0 0 3px var(--teal),var(--hard-shadow-sm)}.Playlist-label-tag{display:flex;align-items:center;padding:0 .75rem;background:var(--ink);color:var(--mustard);font-family:var(--font-mono);font-weight:700;font-size:.66rem;letter-spacing:.18em}.Playlist input{flex:1;min-width:0;border:0;outline:0;padding:.7rem .4rem .7rem .9rem;background:transparent;border-bottom:2px dashed var(--ink-faint);margin:.55rem 0;font-family:var(--font-display);font-optical-sizing:auto;font-weight:700;font-size:1.3rem;color:var(--ink);caret-color:var(--orange)}.Playlist input::placeholder{color:var(--ink-faint);font-style:italic}.Playlist input:focus{border-bottom-color:var(--orange)}.Playlist-label-edit{display:flex;align-items:center;padding:0 .8rem;font-size:1.05rem;color:var(--ink-soft);transition:color .12s ease,transform .12s ease}.Playlist-label:hover .Playlist-label-edit,.Playlist-label:focus-within .Playlist-label-edit{color:var(--orange);transform:rotate(-12deg)}.Playlist-tracks{flex:1;overflow-y:auto;margin:0 -.4rem;padding:0 .4rem}.Playlist-empty{padding:2.2rem .4rem;font-family:var(--font-mono);font-size:.88rem;color:var(--ink-soft);text-align:center}.Playlist-save{cursor:pointer;flex-shrink:0;margin-top:1.2rem;padding:.95rem 0;display:flex;align-items:center;justify-content:center;gap:.6rem;border:3px solid var(--ink);border-radius:5px;background:var(--rec);color:#fff;font-family:var(--font-ui);font-weight:800;font-size:1rem;letter-spacing:.18em;box-shadow:var(--hard-shadow);transition:transform .08s ease,box-shadow .08s ease,background .2s ease}.rec-dot{width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 0 #ffffffb3;animation:rec-blink 1.4s ease-in-out infinite}@keyframes rec-blink{0%,to{opacity:1;box-shadow:0 0 #fff9}50%{opacity:.55;box-shadow:0 0 0 6px #fff0}}.Playlist-save:hover{background:#e84433}.Playlist-save:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--ink)}@media only screen and (max-width:1020px){.Playlist{width:100%}}