*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;font-family:'Crimson Pro',serif;background:#08050200;touch-action:none}
#bg{position:fixed;inset:0;z-index:0;transition:opacity .8s ease}
#bg-snap{position:fixed;inset:0;z-index:0;background-size:cover;background-position:center;pointer-events:none;transition:opacity .8s ease;opacity:0}
#c3d{position:fixed;inset:0;z-index:1}

/* ── Shelf panel (left) ── */
#shelf{position:fixed;left:0;top:0;bottom:0;width:222px;background:rgba(5,3,1,.96);border-right:1px solid rgba(200,150,70,.16);z-index:300;transform:translateX(-100%);transition:transform .38s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;backdrop-filter:blur(8px)}
#shelf.open{transform:translateX(0)}
#shelf h2{font-family:'Playfair Display',serif;font-style:italic;color:rgba(220,175,100,.9);font-size:16px;letter-spacing:2px;padding:20px 18px 6px}
#shelf p{font-size:10px;color:rgba(220,175,100,.4);padding:0 18px 12px;border-bottom:1px solid rgba(200,150,70,.1)}
#shelf-list{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
#shelf-list::-webkit-scrollbar{width:3px}
#shelf-list::-webkit-scrollbar-thumb{background:rgba(200,150,70,.2);border-radius:2px}

/* Shelf item rows */
.si{display:flex;align-items:center;gap:10px;padding:10px 18px;border-bottom:1px solid rgba(200,150,70,.06);transition:background .15s}
.si:hover{background:rgba(200,150,70,.04)}
.si-icon{font-size:18px;width:24px;text-align:center;flex-shrink:0}
.si-info{flex:1;min-width:0}
.si-name{font-size:12px;color:rgba(220,175,100,.9);display:block}
.si-desc{font-size:10px;color:rgba(220,175,100,.35);display:block;margin-top:1px}

/* Toggle switch */
.si-tog{width:32px;height:18px;border-radius:9px;flex-shrink:0;cursor:pointer;border:1px solid rgba(200,150,70,.3);background:rgba(18,9,2,.8);position:relative;transition:background .25s,border-color .25s}
.si-tog.on{background:rgba(165,105,18,.55);border-color:rgba(218,165,58,.7)}
.si-tog::after{content:'';position:absolute;top:3px;left:3px;width:10px;height:10px;border-radius:50%;background:rgba(220,175,100,.35);transition:all .25s cubic-bezier(.4,0,.2,1)}
.si-tog.on::after{left:17px;background:rgba(220,175,100,.95)}
.si-tog:focus-visible{outline:2px solid rgba(220,175,100,.6);outline-offset:2px}

/* ── Background panel (right) ── */
#bgp{position:fixed;right:0;top:0;bottom:0;width:196px;background:rgba(5,3,1,.96);border-left:1px solid rgba(200,150,70,.16);z-index:300;transform:translateX(100%);transition:transform .38s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;backdrop-filter:blur(8px)}
#bgp.open{transform:translateX(0)}
#bgp h2{font-family:'Playfair Display',serif;font-style:italic;color:rgba(220,175,100,.9);font-size:16px;letter-spacing:2px;padding:20px 16px 14px;border-bottom:1px solid rgba(200,150,70,.1)}
.bgo{padding:12px 16px;cursor:pointer;border-bottom:1px solid rgba(200,150,70,.06);display:flex;align-items:center;gap:10px;transition:background .15s}
.bgo:hover{background:rgba(200,150,70,.08)}
.bgo.on{background:rgba(200,150,70,.06)}
.bgo-sw{width:38px;height:24px;border-radius:5px;flex-shrink:0;border:1.5px solid rgba(200,150,70,.14);transition:border-color .2s,box-shadow .2s}
.bgo.on .bgo-sw{border-color:rgba(220,175,100,.7);box-shadow:0 0 6px rgba(220,175,100,.2)}
.bgo-nm{font-size:12px;color:rgba(220,175,100,.85)}

/* Panel overlay — click to close */
#panel-overlay{position:fixed;inset:0;z-index:299;display:none}
#panel-overlay.show{display:block}

/* ── Brightness popup ── */
#brpop{position:fixed;bottom:70px;left:50%;transform:translateX(-50%);background:rgba(5,3,1,.96);border:1px solid rgba(200,150,70,.22);border-radius:14px;padding:13px 20px;z-index:250;display:none;align-items:center;gap:12px;min-width:240px;box-shadow:0 4px 28px rgba(0,0,0,.6);backdrop-filter:blur(8px)}
#brpop.show{display:flex}
#brpop label{font-size:11px;color:rgba(220,175,100,.6);letter-spacing:1px;white-space:nowrap}
#brs{flex:1;appearance:none;-webkit-appearance:none;height:3px;background:rgba(200,150,70,.22);border-radius:2px;outline:none;cursor:pointer}
#brs::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:rgba(220,175,100,.9);cursor:pointer;box-shadow:0 0 4px rgba(220,175,100,.3)}
#brv{font-size:11px;color:rgba(220,175,100,.5);width:26px;text-align:right}

/* ── Bottom toolbar ── */
#bar{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:4px;align-items:center;background:rgba(5,3,1,.94);border:1px solid rgba(200,150,70,.22);border-radius:32px;padding:6px 14px;z-index:200;box-shadow:0 8px 40px rgba(0,0,0,.6);backdrop-filter:blur(8px);max-width:96vw;transition:opacity .6s ease,transform .6s ease}
#bar.autohide{opacity:.06;transform:translateX(-50%) translateY(10px)}
#bar.autohide:hover{opacity:1;transform:translateX(-50%) translateY(0)}
.btn-group{display:flex;gap:3px;align-items:center}
.sep{width:1px;height:18px;background:rgba(200,150,70,.12);margin:0 2px;flex-shrink:0}
#ttl{font-family:'Playfair Display',serif;font-style:italic;color:rgba(220,175,100,.6);font-size:13px;letter-spacing:3px;margin-right:2px;white-space:nowrap}

/* Buttons — icon only, compact */
.btn{background:rgba(36,18,4,.82);border:1px solid rgba(200,150,70,.2);color:rgba(220,175,100,.92);border-radius:50%;width:34px;height:34px;display:flex;align-items:center;justify-content:center;font-size:15px;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);padding:0;position:relative;flex-shrink:0}
.btn:hover{background:rgba(72,38,6,.92);border-color:rgba(200,150,70,.6);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.4)}
.btn:active{transform:translateY(0);box-shadow:none}
.btn.on{background:rgba(105,56,6,.65);border-color:rgba(228,172,68,.8);box-shadow:0 0 12px rgba(228,172,68,.22)}
.btn.eon{background:rgba(22,82,22,.6);border-color:rgba(75,195,75,.55);color:rgba(135,228,135,.95)}
.btn:focus-visible{outline:2px solid rgba(220,175,100,.6);outline-offset:2px}
.btn-sm{width:24px!important;height:24px!important;font-size:10px!important;font-family:'Crimson Pro',serif;letter-spacing:0}

/* Tooltip on hover */
.btn[title]:hover::after{content:attr(title);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:rgba(5,3,1,.95);color:rgba(220,175,100,.85);font-size:11px;font-family:'Crimson Pro',serif;padding:4px 10px;border-radius:6px;white-space:nowrap;pointer-events:none;border:1px solid rgba(200,150,70,.15);box-shadow:0 2px 8px rgba(0,0,0,.5);animation:ttFade .15s ease}
@keyframes ttFade{from{opacity:0;transform:translateX(-50%) translateY(4px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* ── Edit mode badge ── */
#ebadge{position:fixed;top:16px;left:50%;transform:translateX(-50%);background:rgba(16,72,16,.94);border:1px solid rgba(75,195,75,.28);color:rgba(135,228,135,.95);font-size:11px;letter-spacing:2px;padding:6px 20px;border-radius:20px;z-index:250;pointer-events:none;opacity:0;transition:opacity .3s;white-space:nowrap;backdrop-filter:blur(4px)}
#ebadge.show{opacity:1}

/* ── Clock display ── */
#td{position:fixed;top:16px;right:22px;font-family:'Crimson Pro',serif;font-size:13px;letter-spacing:4px;color:rgba(220,175,100,.4);pointer-events:none;z-index:50}

/* ── Sound bars ── */
#sp{display:flex;gap:3px;align-items:flex-end;height:15px;opacity:0;transition:opacity .5s;margin-left:4px}
#sp.on{opacity:1}
.sb{width:3px;background:linear-gradient(to top,#a05020,#f09040);border-radius:1px;height:3px;animation:sbA var(--t,.5s) ease-in-out infinite alternate}
@keyframes sbA{to{height:var(--h,12px)}}

/* ── Loading screen ── */
#load{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:999;background:#050302;transition:opacity 1.2s}
#load h1{font-family:'Playfair Display',serif;font-style:italic;font-size:32px;color:rgba(220,175,100,.8);letter-spacing:8px;margin-bottom:26px;z-index:2;position:relative}
#lbw{width:160px;height:1px;background:rgba(220,175,100,.1);z-index:2;position:relative}
#lb{height:100%;background:rgba(220,175,100,.55);width:0;transition:width .15s}
#load-particles{position:absolute;inset:0;width:100%;height:100%;z-index:0}
#load-glow{position:absolute;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(200,150,70,.12) 0%,rgba(200,150,70,.04) 40%,transparent 70%);top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;animation:loadGlow 3s ease-in-out infinite alternate}
@keyframes loadGlow{from{opacity:.6;transform:translate(-50%,-50%) scale(.9)}to{opacity:1;transform:translate(-50%,-50%) scale(1.1)}}

/* ── Music player panel (multi-source) ── */
#music-panel{position:fixed;bottom:80px;right:20px;width:320px;background:rgba(5,3,1,.96);border:1px solid rgba(200,150,70,.22);border-radius:14px;z-index:260;display:none;flex-direction:column;overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,.7);backdrop-filter:blur(8px)}
#music-panel.show{display:flex}
#music-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(200,150,70,.12);cursor:grab}
#music-header:active{cursor:grabbing}
#music-header span{font-size:12px;color:rgba(220,175,100,.8);letter-spacing:1px}
#music-close{background:none;border:none;color:rgba(220,175,100,.5);font-size:14px;cursor:pointer;padding:2px 6px;border-radius:4px;transition:all .15s}
#music-close:hover{color:rgba(220,175,100,.9);background:rgba(200,150,70,.12)}
#music-url-bar{display:flex;gap:4px;padding:8px 10px;border-bottom:1px solid rgba(200,150,70,.06)}
#music-url{flex:1;background:rgba(200,150,70,.06);border:1px solid rgba(200,150,70,.15);border-radius:6px;color:rgba(220,175,100,.8);font-family:'Crimson Pro',serif;font-size:10px;padding:5px 8px;outline:none;letter-spacing:.3px}
#music-url::placeholder{color:rgba(220,175,100,.3)}
#music-url:focus{border-color:rgba(220,175,100,.4)}
#music-url-go{background:rgba(200,150,70,.1);border:1px solid rgba(200,150,70,.2);color:rgba(220,175,100,.7);width:28px;border-radius:6px;cursor:pointer;font-size:11px;transition:all .15s}
#music-url-go:hover{background:rgba(200,150,70,.2);color:rgba(220,175,100,.95)}
#music-tabs{display:flex;gap:2px;padding:6px 10px;border-bottom:1px solid rgba(200,150,70,.08)}
.mtab{flex:none;width:32px;height:28px;background:rgba(200,150,70,.06);border:1px solid rgba(200,150,70,.12);border-radius:8px;color:rgba(220,175,100,.4);font-size:13px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;padding:0}
.mtab svg{display:block}
.mtab:hover{color:rgba(220,175,100,.7);background:rgba(200,150,70,.1);border-color:rgba(200,150,70,.25)}
.mtab.on{color:rgba(220,175,100,.95);background:rgba(200,150,70,.15);border-color:rgba(220,175,100,.5)}
.msrc{display:none}
.msrc.on{display:block}
.music-iframe{border:none;display:block}
.music-ext-link{display:block;padding:7px 14px;text-align:center;font-size:10px;color:rgba(220,175,100,.35);text-decoration:none;letter-spacing:.5px;border-top:1px solid rgba(200,150,70,.06);transition:color .15s}
.music-ext-link:hover{color:rgba(220,175,100,.7)}
#music-panel.dragging{transition:none}

/* ── Todo sticky note ── */
#todo-panel{position:fixed;top:60px;right:22px;width:240px;background:rgba(5,3,1,.94);border:1px solid rgba(200,150,70,.22);border-radius:14px;z-index:255;display:none;flex-direction:column;overflow:hidden;box-shadow:0 6px 30px rgba(0,0,0,.6);backdrop-filter:blur(8px);max-height:60vh}
#todo-panel.show{display:flex}
#todo-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(200,150,70,.1);cursor:grab}
#todo-header:active{cursor:grabbing}
#todo-header span{font-size:12px;color:rgba(220,175,100,.8);letter-spacing:1px}
#todo-close{background:none;border:none;color:rgba(220,175,100,.4);font-size:14px;cursor:pointer;padding:2px 6px;border-radius:4px;transition:all .15s}
#todo-close:hover{color:rgba(220,175,100,.9);background:rgba(200,150,70,.12)}
#todo-list{flex:1;overflow-y:auto;padding:6px 0;-webkit-overflow-scrolling:touch}
#todo-list::-webkit-scrollbar{width:3px}
#todo-list::-webkit-scrollbar-thumb{background:rgba(200,150,70,.2);border-radius:2px}
.todo-item{display:flex;align-items:center;gap:8px;padding:5px 14px;transition:background .15s}
.todo-item:hover{background:rgba(200,150,70,.04)}
.todo-check{width:14px;height:14px;border-radius:4px;border:1.5px solid rgba(200,150,70,.3);background:none;cursor:pointer;flex-shrink:0;transition:all .15s;padding:0;display:flex;align-items:center;justify-content:center;font-size:9px;color:transparent}
.todo-check.done{background:rgba(200,150,70,.2);border-color:rgba(220,175,100,.5);color:rgba(220,175,100,.8)}
.todo-text{font-size:11px;color:rgba(220,175,100,.8);flex:1;border:none;background:none;outline:none;font-family:'Crimson Pro',serif;letter-spacing:.3px}
.todo-item.done .todo-text{text-decoration:line-through;color:rgba(220,175,100,.3)}
.todo-del{background:none;border:none;color:rgba(220,175,100,.2);font-size:12px;cursor:pointer;padding:0 2px;transition:color .15s;flex-shrink:0}
.todo-del:hover{color:rgba(220,175,100,.7)}
#todo-add{display:flex;gap:4px;padding:8px 10px;border-top:1px solid rgba(200,150,70,.08)}
#todo-input{flex:1;background:rgba(200,150,70,.06);border:1px solid rgba(200,150,70,.15);border-radius:6px;color:rgba(220,175,100,.8);font-family:'Crimson Pro',serif;font-size:10px;padding:5px 8px;outline:none}
#todo-input::placeholder{color:rgba(220,175,100,.3)}
#todo-input:focus{border-color:rgba(220,175,100,.4)}
#todo-add-btn{background:rgba(200,150,70,.1);border:1px solid rgba(200,150,70,.2);color:rgba(220,175,100,.7);width:26px;border-radius:6px;cursor:pointer;font-size:14px;transition:all .15s}
#todo-add-btn:hover{background:rgba(200,150,70,.2);color:rgba(220,175,100,.95)}
#todo-clear-row{display:none;padding:4px 14px 8px;text-align:right}
#todo-clear-row.show{display:block}
#todo-clear{font-size:9px;color:rgba(220,175,100,.25);text-decoration:none;letter-spacing:.3px;transition:color .15s}
#todo-clear:hover{color:rgba(220,175,100,.6)}

/* ── Lights panel ── */
#lights-panel{position:fixed;bottom:70px;left:50%;transform:translateX(-50%);background:rgba(5,3,1,.96);border:1px solid rgba(200,150,70,.22);border-radius:14px;z-index:255;display:none;flex-direction:column;overflow:hidden;box-shadow:0 6px 30px rgba(0,0,0,.6);backdrop-filter:blur(8px);min-width:200px}
#lights-panel.show{display:flex}
#lights-header{padding:10px 16px;border-bottom:1px solid rgba(200,150,70,.1)}
#lights-header span{font-size:12px;color:rgba(220,175,100,.8);letter-spacing:1px}
.light-row{display:flex;align-items:center;gap:10px;padding:9px 16px;border-bottom:1px solid rgba(200,150,70,.06);transition:background .15s}
.light-row:last-child{border-bottom:none}
.light-row:hover{background:rgba(200,150,70,.04)}
.light-icon{font-size:16px;width:22px;text-align:center;flex-shrink:0}
.light-name{font-size:12px;color:rgba(220,175,100,.8);flex:1}

/* ── Help panel ── */
#help-panel{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);background:rgba(5,3,1,.96);border:1px solid rgba(200,150,70,.22);border-radius:14px;z-index:260;display:none;flex-direction:column;overflow:hidden;box-shadow:0 6px 30px rgba(0,0,0,.6);backdrop-filter:blur(8px);min-width:260px;max-width:340px}
#help-panel.show{display:flex}
#help-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(200,150,70,.1)}
#help-header span{font-size:12px;color:rgba(220,175,100,.8);letter-spacing:1px}
#help-body{padding:8px 0}
.help-item{display:flex;align-items:center;gap:10px;padding:7px 16px;font-size:11px;color:rgba(220,175,100,.7);letter-spacing:.3px}
.help-icon{font-size:14px;width:20px;text-align:center;flex-shrink:0}

/* ── Settings panel ── */
#settings-panel{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);background:rgba(5,3,1,.96);border:1px solid rgba(200,150,70,.22);border-radius:14px;z-index:260;display:none;flex-direction:column;overflow:hidden;box-shadow:0 6px 30px rgba(0,0,0,.6);backdrop-filter:blur(8px);min-width:220px}
#settings-panel.show{display:flex}
#settings-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(200,150,70,.1)}
#settings-header span{font-size:12px;color:rgba(220,175,100,.8);letter-spacing:1px}
.settings-section{padding:10px 16px}
.settings-label{font-size:11px;color:rgba(220,175,100,.45);letter-spacing:1px;display:block;margin-bottom:6px}
.settings-options{display:flex;gap:6px}
.settings-opt{background:rgba(200,150,70,.06);border:1px solid rgba(200,150,70,.18);color:rgba(220,175,100,.6);font-family:'Crimson Pro',serif;font-size:11px;padding:5px 14px;border-radius:8px;cursor:pointer;transition:all .15s;letter-spacing:.5px}
.settings-opt:hover{background:rgba(200,150,70,.15);color:rgba(220,175,100,.9);border-color:rgba(200,150,70,.35)}
.settings-opt.active{background:rgba(200,150,70,.2);border-color:rgba(220,175,100,.6);color:rgba(220,175,100,.95)}
.settings-footer{padding:10px 16px 12px;border-top:1px solid rgba(200,150,70,.08)}
.settings-desc{font-size:10px;color:rgba(220,175,100,.35);line-height:1.5;margin:0 0 8px;letter-spacing:.3px}
.settings-github{display:flex;align-items:center;gap:6px;color:rgba(220,175,100,.35);text-decoration:none;font-size:10px;letter-spacing:.5px;transition:color .15s}
.settings-github:hover{color:rgba(220,175,100,.7)}

/* ── Keyboard hint (shown briefly on load) ── */
#keyhint{position:fixed;bottom:70px;left:50%;transform:translateX(-50%);background:rgba(5,3,1,.9);border:1px solid rgba(200,150,70,.15);color:rgba(220,175,100,.5);font-size:10px;letter-spacing:1px;padding:6px 16px;border-radius:10px;z-index:190;opacity:0;transition:opacity .5s;pointer-events:none;white-space:nowrap}
#keyhint.show{opacity:1}

/* ── Mobile responsive ── */
@media(max-width:640px){
  #bar{bottom:10px;padding:5px 10px;gap:3px;border-radius:24px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  #bar::-webkit-scrollbar{display:none}
  #ttl{display:none}
  #ttl+.sep{display:none}
  .btn{width:30px;height:30px;font-size:13px}
  .sep{height:14px}
  #shelf{width:75vw;max-width:260px}
  #bgp{width:65vw;max-width:220px}
  #music-panel{width:calc(100vw - 24px);right:12px;bottom:55px}
  #td{font-size:11px;right:12px;top:10px}
  #ebadge{font-size:9px;padding:4px 14px}
  .help-desktop{display:none}
  #keyhint{display:none}
  #brpop{min-width:200px;padding:10px 14px;bottom:60px}
  .btn[title]:hover::after{display:none}
}
@media(max-width:380px){
  .btn{width:28px;height:28px;font-size:12px}
  .btn-group{gap:2px}
  #bar{gap:2px;padding:4px 8px}
}

/* ── Ambient sounds panel ── */
#ambient-panel{position:fixed;bottom:70px;left:50%;transform:translateX(-50%);background:rgba(5,3,1,.96);border:1px solid rgba(200,150,70,.22);border-radius:14px;z-index:255;display:none;flex-direction:column;overflow:hidden;box-shadow:0 6px 30px rgba(0,0,0,.6);backdrop-filter:blur(8px);min-width:200px}
#ambient-panel.show{display:flex}
#ambient-header{padding:10px 16px;border-bottom:1px solid rgba(200,150,70,.1)}
#ambient-header span{font-size:12px;color:rgba(220,175,100,.8);letter-spacing:1px}
.amb-row{display:flex;align-items:center;gap:10px;padding:9px 16px;border-bottom:1px solid rgba(200,150,70,.06);transition:background .15s}
.amb-row:last-child{border-bottom:none}
.amb-row:hover{background:rgba(200,150,70,.04)}
.amb-icon{font-size:16px;width:22px;text-align:center;flex-shrink:0}
.amb-name{font-size:12px;color:rgba(220,175,100,.8);flex:1}
.amb-tog{width:32px;height:18px;border-radius:9px;flex-shrink:0;cursor:pointer;border:1px solid rgba(200,150,70,.3);background:rgba(18,9,2,.8);position:relative;transition:background .25s,border-color .25s}
.amb-tog.on{background:rgba(165,105,18,.55);border-color:rgba(218,165,58,.7)}
.amb-tog::after{content:'';position:absolute;top:3px;left:3px;width:10px;height:10px;border-radius:50%;background:rgba(220,175,100,.35);transition:all .25s cubic-bezier(.4,0,.2,1)}
.amb-tog.on::after{left:17px;background:rgba(220,175,100,.95)}
.amb-tog:focus-visible{outline:2px solid rgba(220,175,100,.6);outline-offset:2px}

/* ── Ambient volume sliders ── */
.amb-vol{width:52px;height:3px;appearance:none;-webkit-appearance:none;background:rgba(200,150,70,.18);border-radius:2px;outline:none;cursor:pointer;flex-shrink:0;opacity:.5;transition:opacity .2s}
.amb-row:hover .amb-vol,.amb-tog.on~.amb-vol,.amb-vol:focus{opacity:1}
.amb-vol::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;border-radius:50%;background:rgba(220,175,100,.8);cursor:pointer}
.amb-vol::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:rgba(220,175,100,.8);border:none;cursor:pointer}

/* ── Pomodoro timer ── */
#pomo{position:fixed;top:16px;left:22px;width:48px;height:48px;cursor:pointer;z-index:50;display:flex;align-items:center;justify-content:center;user-select:none;transition:transform .15s}
#pomo:hover{transform:scale(1.08)}
#pomo:active{transform:scale(.95)}
#pomo-ring{position:absolute;inset:0;width:100%;height:100%}
#pomo-label{font-family:'Crimson Pro',serif;font-size:10px;letter-spacing:.5px;color:rgba(220,175,100,.6);z-index:1;pointer-events:none;white-space:nowrap}
#pomo.running #pomo-label{color:rgba(220,175,100,.9)}
#pomo.done{animation:pomoPulse 1s ease-in-out infinite alternate}
@keyframes pomoPulse{from{transform:scale(1)}to{transform:scale(1.08)}}

/* ── Shelf reset button ── */
#shelf-reset{display:block;margin:10px 18px 14px;padding:7px 0;background:rgba(200,150,70,.08);border:1px solid rgba(200,150,70,.18);border-radius:8px;color:rgba(220,175,100,.55);font-family:'Crimson Pro',serif;font-size:11px;letter-spacing:1px;cursor:pointer;transition:all .2s}
#shelf-reset:hover{background:rgba(200,150,70,.15);color:rgba(220,175,100,.9);border-color:rgba(200,150,70,.4)}

/* ── Draggable panel headers ── */
#music-header,#ambient-header{cursor:grab}
#music-header:active,#ambient-header:active{cursor:grabbing}
#music-panel.dragging,#ambient-panel.dragging{transition:none}

/* ── Mobile: hide pomo timer on very small screens ── */
@media(max-width:380px){
  #pomo{width:38px;height:38px;top:10px;left:10px}
  #pomo-label{font-size:8px}
}