@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=DM+Sans:wght@500;600;700&display=swap";:root{color:#4b3d2f;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:radial-gradient(circle at 20% 14%,#f3e4c9,#0000 44%),radial-gradient(circle at 78% 82%,#bfa28c,#0000 46%),linear-gradient(160deg,#f3e4c9,#bfa28c 62%,#a98b76);font-family:Inter,SF Pro Text,Segoe UI,Roboto,Helvetica,Arial,sans-serif}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{font-family:Inter,SF Pro Text,Segoe UI,Roboto,Helvetica,Arial,sans-serif}button{font:inherit}.app-shell{box-sizing:border-box;min-height:100vh;padding:34px 20px}.nano-layout{max-width:420px;margin:0 auto}.nano-body{--nano-body-color:#bfa28c;aspect-ratio:.58;background:linear-gradient(160deg, #fff5e97a, #ebd5bc80), var(--nano-body-color);box-sizing:border-box;border:1px solid #a98b768c;border-radius:38px;flex-direction:column;gap:18px;width:100%;padding:22px 20px 30px;display:flex;position:relative;box-shadow:inset 0 1px #fff4e4a6,inset 0 -10px 22px #a7805933,0 24px 46px #8d6a4c47}.nano-black{border-color:#a47e5c75}.nano-top{background:#a98b768c;border-radius:999px;width:98px;height:4px;margin:0 auto}.nano-screen-frame{background:linear-gradient(145deg,#f3e4c9b8,#bfa28cb3);border:1px solid #a98b7680;border-radius:18px;padding:10px;box-shadow:inset 0 1px #fff5e8bd,inset 0 -8px 18px #ab825d2e,0 8px 20px #9670513d}.nano-screen{color:#4f3f33;background:radial-gradient(circle at 20% 16%,#f3e4c9eb,#0000 50%),linear-gradient(165deg,#f3e4c9,#d7c4aa 60%,#bfa28c);border-radius:14px;height:248px;padding:10px 12px 14px;font-family:Inter,SF Pro Text,Segoe UI,Roboto,Helvetica,Arial,sans-serif;position:relative;overflow:hidden;box-shadow:inset 0 1px #fff6eac7,inset 0 -8px 18px #b2886124}.nano-screen:before{content:"";pointer-events:none;background:linear-gradient(150deg,#fff7ec57 0,#fff7ec14 38%,#fff7ec00 68%);position:absolute;inset:0}.nano-screen:after{content:"";pointer-events:none;background:radial-gradient(circle at 78% 82%,#c3976c14,#0000 42%);position:absolute;inset:0}.nano-status-bar{letter-spacing:.02em;z-index:1;color:#705138e6;border-bottom:1px solid #9a775647;justify-content:space-between;align-items:center;margin-bottom:10px;padding-bottom:6px;font-size:13px;display:flex;position:relative}.status-brand{letter-spacing:.02em;text-transform:lowercase;font-family:DM Sans,Inter,SF Pro Text,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-weight:700}.status-right{align-items:center;gap:7px;display:inline-flex}.status-play-indicator{text-align:right;min-width:16px}.status-battery{background:#f6e7d4a6;border:1px solid #7c5a3ec2;border-radius:3px;align-items:center;width:16px;height:8px;padding:1px;display:inline-flex;position:relative}.status-battery:after{content:"";background:#7c5a3ec2;border-radius:0 1px 1px 0;width:2px;height:4px;position:absolute;top:2px;right:-3px}.status-battery-level{background:linear-gradient(90deg,#babf94,#a98b76);border-radius:2px;width:72%;height:100%}.menu-screen,.about-screen,.now-playing,.connect-screen,.search-screen{z-index:1;position:relative}.menu-screen{flex-direction:column;flex:1;min-height:0;display:flex}.now-playing{flex-direction:column;justify-content:center;min-height:176px;display:flex}.menu-screen h2,.about-screen h2{letter-spacing:.02em;color:#6d4f37;text-transform:none;margin:0 0 8px;font-family:DM Sans,Inter,SF Pro Text,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:18px;font-weight:700}.nano-list{flex-direction:column;flex:1;gap:5px;min-height:0;max-height:none;margin:0;padding:0;list-style:none;display:flex;overflow:auto}.nano-list li{color:#684c35;border:1px solid #0000;border-radius:10px;grid-template-columns:1fr auto;align-items:center;gap:6px;padding:8px 10px;font-size:15px;transition:background .18s,box-shadow .18s,transform .12s;display:grid}.nano-list li.active{background:linear-gradient(120deg,#ead3bb,#e0c3a3);border-color:#a87e5b61;box-shadow:inset 0 1px #fff3e3cc,0 4px 10px #9c765433}.item-main{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.item-meta{opacity:.85;color:#866447;font-size:12px}.caret{opacity:.8;font-size:12px}.about-screen p{margin:0 0 8px;font-size:12px}.about-screen .small{letter-spacing:.04em;font-size:10px}.connect-screen{flex:1;align-content:center;place-items:center;gap:12px;min-height:0;display:grid}.connect-screen h2,.search-screen h2{letter-spacing:.02em;color:#6d4f37;margin:0;font-family:DM Sans,Inter,SF Pro Text,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:18px;font-weight:700}.screen-connect-button{color:#5f442f;cursor:pointer;background:linear-gradient(130deg,#ecd6bd,#dfc09f);border:1px solid #a27b5973;border-radius:999px;padding:9px 16px;font-size:14px;font-weight:600;transition:transform 90ms,box-shadow .12s;box-shadow:inset 0 1px #fff4e5d9,0 6px 12px #98725138}.screen-connect-button:active{transform:scale(.97);box-shadow:inset 0 2px 4px #96704f33,inset 0 -1px #fff4e5a6}.album-art{background:#e6cfb3;border:1px solid #aa825f6b;border-radius:12px;width:82px;height:82px;margin:0 auto 10px;overflow:hidden;box-shadow:inset 0 1px #fff6e9c7,0 6px 14px #926c4e33}.album-art img{object-fit:cover;width:100%;height:100%;display:block}.art-fallback{letter-spacing:.1em;color:#6f5138;place-items:center;width:100%;height:100%;font-family:DM Sans,Inter,SF Pro Text,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:16px;display:grid}.track-name,.artist-name{text-align:center;white-space:nowrap;text-overflow:ellipsis;margin:0;overflow:hidden}.track-name{letter-spacing:.01em;color:#5f4530;max-width:100%;font-family:DM Sans,Inter,SF Pro Text,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:19px;font-weight:700}.artist-name{opacity:.9;color:#7d5d42;margin-top:6px;font-size:14px}.typewriter{animation:4.8s ease-in-out infinite gentleLift}.progress-block{margin-top:12px}.progress-dashes{border-bottom:2px solid #a37b5973;border-radius:999px;height:0;position:relative}.progress-fill{background:linear-gradient(90deg,#c99c6f,#b6865d);height:2px;position:absolute;top:-1px;left:0}.timer-row{color:#715239cc;justify-content:space-between;margin-top:6px;font-size:13px;display:flex}.screen-glare{pointer-events:none;background:linear-gradient(150deg,#fff8ee3b 0,#fff8ee14 22%,#fff8ee00 55%);position:absolute;inset:0}.click-wheel{aspect-ratio:1;-webkit-user-select:none;user-select:none;touch-action:none;background:radial-gradient(circle at 40% 35%,#f3e4c9db,#0000 54%),linear-gradient(160deg,#f3e4c9,#bfa28c);border-radius:50%;width:min(250px,94%);margin:0 auto;position:relative;box-shadow:inset 0 1px #fff6e9d6,inset 0 -10px 16px #a67e5b33,0 10px 18px #8c67493d}.wheel-zone{flex:1;justify-content:center;align-items:center;min-height:150px;padding-bottom:6px;display:flex}.wheel-button{color:#6f5036;letter-spacing:.02em;cursor:pointer;background:0 0;border:0;font-family:Inter,SF Pro Text,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:16px;font-weight:600;transition:transform 90ms,color .12s;position:absolute}.wheel-button:hover{color:#5f452f}.wheel-button:active{transform:scale(.97)}.wheel-menu{top:18px;left:50%;transform:translate(-50%)}.wheel-prev{top:50%;left:20px;transform:translateY(-50%)}.wheel-next{top:50%;right:20px;transform:translateY(-50%)}.wheel-play{bottom:18px;left:50%;transform:translate(-50%)}.wheel-center{aspect-ratio:1;cursor:pointer;background:linear-gradient(165deg,#f3e4c9,#bfa28c);border:1px solid #af87636b;border-radius:50%;width:43%;margin:auto;transition:transform 90ms,box-shadow .12s;position:absolute;inset:0;box-shadow:inset 0 1px #fff5e6e6,inset 0 -9px 13px #a37b5830,0 5px 10px #8d684a33}.wheel-center:active{transform:scale(.97);box-shadow:inset 0 2px 5px #946f4f3d,inset 0 -1px #fff5e6ad}.error{color:#8f4f39;text-align:center;margin:0;font-size:12px}@keyframes gentleLift{0%{opacity:.95;transform:translateY(0)}50%{opacity:1;transform:translateY(-1px)}to{opacity:.95;transform:translateY(0)}}@media (width<=880px){.nano-body{max-width:370px}.nano-screen{height:238px}.wheel-zone{min-height:132px}}