:root{--gold:#e8a91c;--gold2:#ffca4b;--ink:#050504;--panel:#0b0b09;--line:rgba(232,169,28,.48);--text:#f7f1e7;--muted:#b9b0a2}
*{box-sizing:border-box}html{background:#020201;scroll-behavior:smooth}body{margin:0;color:var(--text);font-family:Georgia,"Times New Roman",serif;background:#020201;min-height:100vh}.app-shell{width:min(100%,820px);margin:0 auto;min-height:100vh;background:linear-gradient(180deg,rgba(0,0,0,.15),#030302 34%,#030302);box-shadow:0 0 55px rgba(0,0,0,.8);overflow:hidden;position:relative}.hero{height:560px;padding:36px 34px 20px;position:relative;background:linear-gradient(180deg,rgba(3,2,0,.15),rgba(5,4,2,.34) 45%,#050504 100%),url('assets/images/fondo-casa-rignac.jpg') center/cover no-repeat}.hero:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 32%,transparent 0 28%,rgba(0,0,0,.18) 58%,rgba(0,0,0,.62) 100%);pointer-events:none}.back-button{position:absolute;z-index:3;left:48px;top:54px;width:72px;height:72px;border-radius:50%;border:2px solid var(--gold);background:rgba(3,3,2,.58);color:var(--gold2);font-size:44px;line-height:1;box-shadow:0 0 18px rgba(232,169,28,.15)}.brand{position:absolute;z-index:2;top:72px;left:50%;transform:translateX(-50%);text-align:center;text-shadow:0 2px 12px #000}.fleur{font-size:45px;color:var(--gold2);line-height:1}.brand-name{font-size:34px;letter-spacing:7px}.brand-subtitle{font-size:15px;color:#d9ac48;letter-spacing:1.6px;line-height:1.25}.status-card{position:absolute;z-index:2;right:36px;top:54px;width:186px;padding:17px 22px 14px;border:2px solid var(--gold);border-radius:24px;background:rgba(5,5,4,.72);box-shadow:0 0 16px rgba(232,169,28,.16)}.status-time,.status-weather{display:flex;align-items:center;gap:11px;font-family:Arial,sans-serif}.status-time{font-size:29px}.status-time span,.status-weather span{color:var(--gold2)}.status-date{font-size:16px;color:var(--gold2);margin:4px 0 12px 34px}.status-divider{height:1px;background:var(--gold);opacity:.7;margin-bottom:12px}.status-weather{justify-content:space-between;font-size:24px}.hero-title-wrap{position:absolute;z-index:2;left:78px;bottom:144px;display:flex;align-items:center;gap:26px}.module-icon{width:115px;height:115px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--gold);font-size:64px;color:var(--gold2);background:rgba(5,5,4,.72);box-shadow:0 0 22px rgba(232,169,28,.2)}h1,h2{margin:0;text-shadow:0 3px 18px #000}h1{font-size:49px;letter-spacing:1px}h2{font-size:38px;font-weight:400;margin-top:3px}.ornament{position:absolute;z-index:2;left:220px;right:55px;bottom:111px;display:flex;align-items:center;gap:15px;color:var(--gold2)}.ornament span{height:2px;flex:1;background:linear-gradient(90deg,transparent,var(--gold),transparent)}.hero-copy{position:absolute;z-index:2;left:180px;bottom:39px;margin:0;font-size:27px;line-height:1.24;text-shadow:0 2px 13px #000}.audio-panel{margin:-8px 58px 0;padding:0 24px 24px;border:2px solid var(--gold);border-radius:42px;background:linear-gradient(145deg,rgba(21,21,17,.96),rgba(4,4,3,.99));box-shadow:0 0 28px rgba(232,169,28,.1);position:relative;z-index:4}.panel-heading{display:flex;justify-content:center;align-items:center;gap:17px;height:88px;border-bottom:1px solid rgba(232,169,28,.22);color:#f3c55f}.panel-heading h3{font-size:30px;margin:0;font-weight:400;letter-spacing:1px}.headphones{font-family:Arial,sans-serif;font-size:28px}.track-list{max-height:720px;overflow:auto;padding:0 0 10px;scrollbar-width:thin;scrollbar-color:var(--gold) transparent}.track{display:grid;grid-template-columns:70px 1fr auto 58px;align-items:center;gap:13px;min-height:88px;padding:10px 14px;border:1px solid rgba(232,169,28,.24);border-radius:18px;background:linear-gradient(90deg,rgba(28,27,20,.82),rgba(9,10,9,.92));margin-bottom:2px;transition:.22s ease}.track:hover,.track.active{border-color:var(--gold);background:linear-gradient(90deg,rgba(88,61,12,.54),rgba(14,14,11,.96));transform:translateX(2px)}.track-number{width:58px;height:58px;border:1px solid rgba(232,169,28,.8);border-radius:50%;display:grid;place-items:center;font-size:22px;color:#eee}.track.active .track-number{color:#111;background:linear-gradient(145deg,var(--gold2),#c48000);font-weight:bold}.track-title{font-size:24px;line-height:1.05}.track-subtitle{font-size:17px;color:var(--muted);margin-top:4px}.track-duration{font:18px Arial,sans-serif;color:#cfc8bb}.track-play{width:52px;height:52px;border-radius:50%;border:2px solid var(--gold);background:rgba(7,7,5,.75);color:var(--gold2);font-size:22px}.player-card{margin-top:34px;padding:24px;border:2px solid var(--gold);border-radius:36px;display:grid;grid-template-columns:175px 1fr;gap:25px;background:linear-gradient(135deg,#10110d,#070806)}.cover{width:175px;height:175px;object-fit:cover;border:3px solid #f0bd3e;border-radius:50%;padding:5px;background:#060603}.player-content{min-width:0}.eyebrow{color:#f3c55f;font-size:19px;letter-spacing:1px;margin-top:4px}.current-title{font-size:28px;margin:7px 0 18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.progress{width:100%;accent-color:var(--gold2)}.time-row{display:flex;justify-content:space-between;font:15px Arial,sans-serif;color:#ddd}.controls{display:grid;grid-template-columns:60px 75px 60px 1fr;align-items:center;gap:12px;margin-top:12px}.controls button{color:var(--gold2);background:transparent}.small-control{border:0;font-size:35px;position:relative}.small-control small{font:12px Arial,sans-serif;position:absolute;left:23px;top:19px}.main-control{width:72px;height:72px;border:2px solid var(--gold)!important;border-radius:50%;font-size:28px!important;background:rgba(8,8,5,.8)!important}.volume-box{display:flex;align-items:center;gap:8px}.volume-box input{width:90px;accent-color:var(--gold2)}.bottom-nav{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;padding:36px 26px 18px}.bottom-nav a{min-height:74px;border:1px solid rgba(232,169,28,.35);border-radius:16px;color:#eee;text-decoration:none;display:flex;align-items:center;justify-content:center;gap:10px;background:linear-gradient(145deg,#10100d,#080806)}.bottom-nav span{color:var(--gold2);font-size:28px}.bottom-nav b{font-size:16px;font-weight:400}.footer-ornament{display:flex;align-items:center;gap:15px;color:var(--gold2);padding:6px 58px 35px}.footer-ornament span{height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--gold))}.footer-ornament span:last-child{background:linear-gradient(90deg,var(--gold),transparent)}button,a,input{touch-action:manipulation}button{cursor:pointer}
@media(max-width:700px), (min-width:900px) and (orientation:landscape){.app-shell{width:100%}.hero{height:475px;padding:20px}.back-button{left:24px;top:31px;width:54px;height:54px;font-size:32px}.brand{top:34px}.fleur{font-size:32px}.brand-name{font-size:25px}.brand-subtitle{font-size:11px}.status-card{right:19px;top:29px;width:145px;padding:12px 14px;border-radius:18px}.status-time{font-size:23px}.status-date{font-size:12px;margin-left:27px}.status-weather{font-size:19px}.hero-title-wrap{left:32px;bottom:142px;gap:15px}.module-icon{width:82px;height:82px;font-size:45px}.hero-title-wrap h1{font-size:31px}.hero-title-wrap h2{font-size:27px}.ornament{left:126px;right:22px;bottom:116px}.hero-copy{left:92px;bottom:49px;font-size:20px}.audio-panel{margin:0 16px;padding:0 12px 16px;border-radius:30px}.panel-heading{height:72px}.panel-heading h3{font-size:24px}.track-list{max-height:620px}.track{grid-template-columns:52px 1fr 44px;min-height:78px;padding:8px}.track-number{width:44px;height:44px;font-size:17px}.track-title{font-size:18px}.track-subtitle{font-size:14px}.track-duration{display:none}.track-play{width:42px;height:42px;font-size:18px}.player-card{grid-template-columns:92px 1fr;gap:14px;padding:16px;border-radius:26px}.cover{width:92px;height:92px}.eyebrow{font-size:14px}.current-title{font-size:19px;margin-bottom:8px}.controls{grid-template-columns:44px 58px 44px 1fr;gap:4px}.main-control{width:56px;height:56px}.volume-box input{width:50px}.bottom-nav{gap:5px;padding:24px 8px 15px}.bottom-nav a{min-height:60px;flex-direction:column;gap:2px}.bottom-nav span{font-size:22px}.bottom-nav b{font-size:11px}.footer-ornament{padding:5px 30px 28px}}
@media(max-width:430px){.brand{left:49%}.status-card{width:132px}.hero-title-wrap{left:23px}.hero-title-wrap h1{font-size:27px}.hero-title-wrap h2{font-size:23px}.hero-copy{left:72px;font-size:18px}.player-card{grid-template-columns:1fr}.cover{display:none}.volume-box span{display:none}}

/* v4.4 3D icons */
.back-button{overflow:hidden;padding:0}.back-button .r3d-icon{width:100%;height:100%}
.module-icon{padding:0!important;overflow:hidden}.module-icon .r3d-icon{width:100%;height:100%}
.main-control{overflow:hidden;padding:0}.main-control .r3d-control-icon{width:100%;height:100%;transform:scale(1.08)}
.bottom-nav a{gap:6px}.bottom-nav .r3d-nav-icon{width:27px;height:27px}