/* SYSLOG · the daily logs box (under the Living Studio) and the logs page.
   Same navy as the professional page, the studio's gold tint for signals. */
.syslog{--sl-gold:207,178,116;margin-top:22px;padding:16px 18px 14px;border:1px solid var(--line-soft,#182232);border-radius:12px;background:linear-gradient(180deg,rgba(13,21,37,.72),rgba(10,16,29,.5))}
.syslog-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--line-soft,#182232)}
.syslog-label{display:inline-flex;align-items:center;gap:9px;font:500 10.5px/1 "SFMono-Regular",Menlo,Consolas,monospace;letter-spacing:.2em;color:#b4bbac}
.syslog-dot{width:6px;height:6px;border-radius:50%;background:rgb(var(--sl-gold));box-shadow:0 0 10px rgba(var(--sl-gold),.8);animation:syslogPulse 2.2s ease-in-out infinite}
@keyframes syslogPulse{50%{opacity:.35}}
.syslog-all{font-size:12.5px;color:rgb(var(--sl-gold));text-decoration:none;white-space:nowrap}
.syslog-all:hover{text-decoration:underline;text-underline-offset:3px}
.syslog-view{position:relative;margin-top:6px;overflow:hidden}
.syslog.is-rolling .syslog-view{-webkit-mask:linear-gradient(180deg,transparent 0,#000 16%,#000 82%,transparent 100%);mask:linear-gradient(180deg,transparent 0,#000 16%,#000 82%,transparent 100%)}
.syslog-list{list-style:none;margin:0;padding:0;will-change:transform}
.syslog-list a{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:8px 6px;margin:0 -6px;border-radius:6px;text-decoration:none;color:inherit;font:12px/1.4 "SFMono-Regular",Menlo,Consolas,monospace;transition:background .25s}
.syslog-list a:hover{background:rgba(var(--sl-gold),.07)}
.s-date{color:#73d8e9}
.s-no{color:var(--text,#e4eaf6)}
.s-title{color:var(--muted,#96a4be);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-title::before{content:"· ";color:var(--quiet,#667793)}
.s-when{color:var(--quiet,#667793);font-size:11px}
.s-when.is-new{color:rgb(var(--sl-gold))}
.s-empty{padding:10px 0;color:var(--muted,#96a4be);font-size:13px}
.syslog-foot{margin:10px 0 0;font:10px/1.4 "SFMono-Regular",Menlo,Consolas,monospace;letter-spacing:.18em;color:var(--quiet,#667793)}
.syslog-mob{display:none}
@media (max-width:760px){
  .syslog-desk{display:none}
  .syslog-mob{display:block;margin:6px 16px 26px}
  .syslog-list a{grid-template-columns:auto minmax(0,1fr) auto;gap:10px}
  .syslog-list .s-date{display:none}
}
@media (prefers-reduced-motion:reduce){.syslog-dot{animation:none}}

/* ── logs.html: the feed ── */
.logs-page{max-width:820px;margin:0 auto;padding:40px 20px 90px}
.logs-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:18px;border-bottom:1px solid var(--line-soft,#182232)}
.logs-top a{color:var(--muted,#96a4be);text-decoration:none;font-size:13px}
.logs-top a:hover{color:var(--text,#e4eaf6)}
.logs-intro{margin:44px 0 30px}
.logs-intro[hidden]{display:none}
.logs-intro p{margin:0;font:500 10.5px/1 "SFMono-Regular",Menlo,Consolas,monospace;letter-spacing:.22em;color:rgb(207,178,116)}
.logs-intro h1{margin:14px 0 10px;font-size:clamp(34px,6vw,52px);font-weight:600;letter-spacing:-.03em;line-height:1.05;color:var(--text,#e4eaf6)}
.logs-intro span{font-size:15px;color:var(--muted,#96a4be)}
.logs-intro .demo{display:inline-block;margin-left:10px;font:10px/1 "SFMono-Regular",Menlo,monospace;letter-spacing:.18em;color:#73d8e9;border:1px dashed #73d8e966;border-radius:4px;padding:4px 7px}
.logs-stream{display:grid;gap:12px}
.lblock{display:block;padding:18px 20px 14px;border:1px solid var(--line-soft,#182232);border-radius:12px;background:rgba(13,21,37,.5);text-decoration:none;color:inherit;transition:border-color .3s,background .3s}
.lblock:hover,.lblock:focus-visible{border-color:rgba(207,178,116,.5);background:rgba(13,21,37,.75);outline:none}
.lblock.is-latest{border-color:rgba(207,178,116,.32)}
.lblock-head{display:flex;align-items:center;gap:14px;font:11px/1 "SFMono-Regular",Menlo,Consolas,monospace;letter-spacing:.12em}
.lblock-head b{font-size:13.5px;font-weight:600;color:rgb(207,178,116);letter-spacing:.12em;white-space:nowrap}
.lblock-date{color:var(--muted,#96a4be);white-space:nowrap}
.lblock-rule{flex:1;height:1px;background:var(--line-soft,#182232);min-width:20px}
.lblock-n{color:var(--quiet,#667793);white-space:nowrap}
.lblock-lines{list-style:none;margin:12px 0 0;padding:0}
.lblock-lines li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;padding:5px 0}
.lblock-lines time{font:12.5px/1.6 "SFMono-Regular",Menlo,Consolas,monospace;color:#73d8e9}
.lblock-lines p{margin:0;font-size:15px;line-height:1.6;color:#c9d3e6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lblock-lines p.is-photo{color:var(--muted,#96a4be);font:12.5px/1.6 "SFMono-Regular",Menlo,monospace}
.lblock-more p{font:12px/1.6 "SFMono-Regular",Menlo,monospace;letter-spacing:.06em;color:rgb(207,178,116)}
.logs-more{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:20px}
.logs-btn{font:inherit;font-size:14px;color:var(--text,#e4eaf6);background:rgba(13,21,37,.8);border:1px solid var(--line,#243046);border-radius:8px;padding:10px 16px;cursor:pointer}
.logs-btn:hover{border-color:rgb(207,178,116)}
.logs-btn.ghost{background:none;border-color:transparent;color:var(--muted,#96a4be)}
.logs-btn[hidden]{display:none}
.logs-count{margin-left:auto;font:10.5px/1 "SFMono-Regular",Menlo,monospace;letter-spacing:.16em;color:var(--quiet,#667793)}

/* ── logs.html#/N: one day, every entry at its time ── */
.lone{margin-top:30px;animation:loneIn .6s cubic-bezier(.22,1,.36,1)}
@keyframes loneIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.lone-back{display:inline-block;color:var(--muted,#96a4be);text-decoration:none;font-size:13px}
.lone-back:hover{color:var(--text,#e4eaf6)}
.lone-head{margin:34px 0 28px;padding-bottom:22px;border-bottom:1px solid var(--line-soft,#182232)}
.lone-no{margin:0;font:600 14px/1 "SFMono-Regular",Menlo,Consolas,monospace;letter-spacing:.2em;color:rgb(207,178,116)}
.lone-head h1{margin:14px 0 10px;font-size:clamp(30px,5vw,46px);font-weight:600;letter-spacing:-.03em;line-height:1.1;color:var(--text,#e4eaf6)}
.lone-meta{margin:0;font:11.5px/1 "SFMono-Regular",Menlo,Consolas,monospace;letter-spacing:.12em;color:var(--muted,#96a4be)}
.lone-stream{list-style:none;margin:0;padding:0}
.lone-stream>li{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);gap:18px;padding:14px 0}
.lone-stream>li::before{content:"";position:absolute;left:52px;top:0;bottom:0;width:1px;background:var(--line-soft,#182232)}
.lone-stream>li::after{content:"";position:absolute;left:49px;top:22px;width:7px;height:7px;border-radius:50%;background:var(--bg,#060910);border:1px solid #73d8e9}
.lone-stream time{font:13px/1.9 "SFMono-Regular",Menlo,Consolas,monospace;color:#73d8e9}
.lone-entry p{margin:0;font-size:17px;line-height:1.75;color:var(--text,#e4eaf6)}
.lone-entry p.cont{margin-top:12px;color:#c9d3e6}
.lone-entry figure{margin:10px 0 0}
.lone-entry figure:first-child{margin-top:4px}
.lone-entry img{display:block;width:100%;max-width:560px;border-radius:12px;border:1px solid var(--line-soft,#182232)}
.lone-entry figcaption{margin-top:8px;font:11px/1.5 "SFMono-Regular",Menlo,monospace;letter-spacing:.06em;color:var(--quiet,#667793)}
.lone-nav{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:40px;padding-top:22px;border-top:1px solid var(--line-soft,#182232)}
.lone-step{display:block;padding:16px 18px;border:1px solid var(--line-soft,#182232);border-radius:12px;text-decoration:none;color:inherit;transition:border-color .3s}
.lone-step:hover{border-color:rgba(207,178,116,.55)}
.lone-step.next{text-align:right}
.lone-step b{display:block;font:600 13px/1 "SFMono-Regular",Menlo,monospace;letter-spacing:.14em;color:rgb(207,178,116)}
.lone-step span{display:block;margin-top:8px;font-size:13px;color:var(--muted,#96a4be)}
.lone-step.off{opacity:.4;pointer-events:none;border-style:dashed}
@media (max-width:640px){.logs-page{padding:28px 16px 80px}.lblock{padding:16px}.lblock-n,.lblock-rule{display:none}.lblock-head{flex-wrap:wrap;gap:6px 12px}.lblock-date{white-space:normal}.lblock-lines li,.lone-stream>li{grid-template-columns:50px minmax(0,1fr);gap:12px}.lone-stream>li::before{left:40px}.lone-stream>li::after{left:37px}.lone-nav{grid-template-columns:1fr}.lone-step.next{text-align:left}}
@media (prefers-reduced-motion:reduce){.lone{animation:none}}

/* ── the logs inside the hyper-mind (logs.html + syslog-hyper.js): the day dial ── */
.hm-veil{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:0;transition:opacity .9s;background:radial-gradient(ellipse at 50% 46%,rgba(5,6,8,.74) 0,rgba(5,6,8,.6) 42%,rgba(5,6,8,.42) 100%)}
body.hm-log-open .hm-veil{opacity:1}
body.hm-log-open #ticker,body.hm-log-open #tl,body.hm-log-open #pl,body.hm-log-open #frags,body.hm-log-open #story,body.hm-log-open #center,body.hm-log-open #playbtn,body.hm-log-open #dreambtn,body.hm-log-open #mic,body.hm-log-open #termhint,body.hm-log-open #voice,body.hm-log-open #hint{opacity:0!important;pointer-events:none!important;transition:opacity .5s}
.hm-day{position:fixed;inset:0;z-index:61;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity .5s ease;color:var(--ivory,#e9e4d6)}
.hm-day.on{opacity:1}
.hm-day.is-switching{opacity:0;transition-duration:.16s}
.hm-day:not(.on) .hm-day-grid{pointer-events:none}
.hm-day-grid{display:grid;grid-template-columns:minmax(0,1fr);width:min(1600px,94vw);height:min(880px,calc(100vh - 160px));margin-top:-34px;pointer-events:auto}
.hm-k{margin:0 0 14px;font:400 9.5px/1.4 'JetBrains Mono',monospace;letter-spacing:.3em;text-transform:uppercase;color:#ecd08a}
.hm-tl{display:flex;flex-direction:column;min-height:0}
.hm-car-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;margin-bottom:4px}
.hm-car-head .step{display:flex;align-items:center;gap:8px;padding:9px 12px;border:0;border-radius:999px;background:rgba(255,255,255,.04);color:rgba(233,228,214,.75);cursor:pointer;transition:background .25s,color .25s}
.hm-car-head .step.older{justify-self:start}.hm-car-head .step.newer{justify-self:end}
.hm-car-head .step b{font:300 20px/1 'Cormorant Garamond',serif;color:#ecd08a}
.hm-car-head .step span{font:400 9.5px/1 'JetBrains Mono',monospace;letter-spacing:.2em}
.hm-car-head .step:hover:not(:disabled){background:rgba(255,255,255,.08);color:#fff3cf}
.hm-car-head .step:disabled{opacity:.15;cursor:default}
.hm-date{display:flex;align-items:center;gap:10px;padding:10px 18px;border:0;border-radius:999px;background:rgba(255,255,255,.06);color:var(--ivory,#e9e4d6);cursor:pointer;transition:background .25s}
.hm-date:hover,.hm-date[aria-expanded="true"]{background:rgba(255,255,255,.11)}
.hm-date .ic{width:13px;height:12px;border:1px solid #ecd08a;border-top-width:3px;border-radius:2px}
.hm-date .t{font:400 11px/1 'JetBrains Mono',monospace;letter-spacing:.22em}
.hm-date .v{font-size:9px;color:#ecd08a;transition:transform .25s}
.hm-date[aria-expanded="true"] .v{transform:rotate(180deg)}
.hm-stage{position:relative;flex:1;min-height:380px;perspective:1600px;perspective-origin:50% 45%;overflow:hidden;touch-action:pan-y;cursor:grab;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.hm-stage:active{cursor:grabbing}
.hm-card{position:absolute;left:0;top:0;width:var(--cw,min(560px,48%));max-height:calc(100% - 30px);display:flex;flex-direction:column;overflow:hidden;border-radius:20px;transition:filter .45s ease;background:#121318;box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 40px 90px -30px rgba(0,0,0,.95);transform-style:preserve-3d;will-change:transform,opacity;-webkit-backface-visibility:hidden;backface-visibility:hidden;cursor:pointer;user-select:none;-webkit-user-select:none;color:var(--ivory,#e9e4d6)}
.hm-card.is-front{background:#15161c;cursor:default;user-select:text;-webkit-user-select:text}
.hm-card.is-near{filter:blur(2.2px) brightness(.72)}
.hm-card.is-far{filter:blur(4.5px) brightness(.5)}
.hm-card figure{position:relative;flex:0 0 auto;margin:0;overflow:hidden;background:#0b0c10}
.hm-card figure img{display:block;width:100%;height:auto;aspect-ratio:16/10;max-height:46vh;object-fit:cover;pointer-events:none}
.hm-card.is-front figure{cursor:zoom-in}
.hm-card.is-front figure img{pointer-events:auto}
.hm-card figure::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40%;background:linear-gradient(180deg,transparent,rgba(18,19,24,.55));pointer-events:none}
.hm-card .more{position:absolute;right:12px;top:12px;z-index:1;padding:5px 9px;border-radius:999px;background:rgba(5,6,8,.65);font:400 10px/1 'JetBrains Mono',monospace;letter-spacing:.12em;color:#ecd08a}
.hm-card .body{flex:0 1 auto;min-height:0;display:flex;flex-direction:column;padding:24px 28px 26px;overflow:hidden}
.hm-card.is-front .body{overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(236,208,138,.35) transparent}
.hm-card .top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px}
.hm-card time{font:400 15px/1 'JetBrains Mono',monospace;letter-spacing:.06em;color:#ecd08a}
.hm-card .tag{padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.05);font:400 8.5px/1 'JetBrains Mono',monospace;letter-spacing:.22em;color:rgba(233,228,214,.6)}
.hm-card .txt{margin:0;font:400 19px/1.55 Inter,system-ui,sans-serif}
.hm-card .txt.is-short{font:300 28px/1.3 Inter,system-ui,sans-serif;letter-spacing:-.01em}
.hm-card .txt.is-mid{font:300 22px/1.45 Inter,system-ui,sans-serif}
.hm-card .txt.is-long{font:400 18px/1.6 Inter,system-ui,sans-serif}
.hm-card .txt.is-cap{font:300 22px/1.4 Inter,system-ui,sans-serif}
.hm-card blockquote{margin:16px 0 0;padding:0 0 0 16px;border-left:2px solid rgba(236,208,138,.35)}
.hm-card blockquote p{margin:0;font:300 16.5px/1.65 Inter,system-ui,sans-serif;color:rgba(233,228,214,.82)}
.hm-card blockquote p+p{margin-top:10px}
.hm-card .cap{margin:12px 0 0;font:400 10px/1.4 'JetBrains Mono',monospace;letter-spacing:.18em;text-transform:uppercase;color:rgba(233,228,214,.5)}
.hm-card.is-title .body{padding:34px 36px 30px}
.hm-card.is-title h2{margin:10px 0 6px;font:300 64px/1 'Cormorant Garamond',serif}
.hm-card.is-title .dt{margin:0;font:400 11px/1.4 'JetBrains Mono',monospace;letter-spacing:.24em;text-transform:uppercase;color:rgba(233,228,214,.6)}
.hm-card.is-title dl{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:30px 0 22px;padding:16px 0;border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07)}
.hm-card.is-title dl div{display:flex;flex-direction:column;gap:6px}
.hm-card.is-title dt{font:400 8.5px/1 'JetBrains Mono',monospace;letter-spacing:.2em;text-transform:uppercase;color:rgba(233,228,214,.45)}
.hm-card.is-title dd{margin:0;font:400 15px/1 'JetBrains Mono',monospace;letter-spacing:.04em}
.hm-card.is-title .hint{margin:22px 0 0;font:400 8.5px/1.4 'JetBrains Mono',monospace;letter-spacing:.24em;text-transform:uppercase;color:rgba(233,228,214,.34)}
.hm-day.is-low .hm-card time{color:#a9bcd6}
.hm-car-ctl{display:grid;grid-template-columns:46px minmax(0,1fr) 46px 70px;align-items:center;gap:20px;width:min(980px,100%);margin:10px auto 0}
.hm-car-ctl .a{width:46px;height:46px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.06);color:#ecd08a;font:300 26px/1 'Cormorant Garamond',serif;cursor:pointer;transition:background .25s,opacity .25s}
.hm-car-ctl .a:hover:not(:disabled){background:rgba(255,255,255,.12)}
.hm-car-ctl .a:disabled{opacity:.2;cursor:default}
.hm-car-ctl .n{text-align:left;font:400 10px/1 'JetBrains Mono',monospace;letter-spacing:.24em;color:rgba(233,228,214,.6)}
.hm-strip{position:relative;height:34px;margin-top:8px}
.hm-strip .line{position:absolute;left:0;right:0;top:12px;height:1px;background:linear-gradient(90deg,rgba(236,208,138,.12),rgba(236,208,138,.4),rgba(236,208,138,.12))}
.hm-strip .h{position:absolute;top:12px;transform:translateX(-50%);font:400 8.5px/1 'JetBrains Mono',monospace;letter-spacing:.14em;color:rgba(233,228,214,.34)}
.hm-strip .dot{position:absolute;top:-4px;width:9px;height:9px;margin-left:-4.5px;padding:0;border:0;border-radius:50%;background:rgba(236,208,138,.45);cursor:pointer;transition:transform .3s,background .3s,box-shadow .3s}
.hm-strip .dot:hover{transform:scale(1.3)}
.hm-strip .dot.on{background:#ecd08a;box-shadow:0 0 12px #ecd08a;transform:scale(1.5)}
.hm-calpop{position:fixed;left:50%;top:132px;z-index:64;width:330px;padding:18px 18px 16px;border-radius:18px;background:rgba(14,15,20,.97);box-shadow:0 30px 80px -20px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.06);opacity:0;pointer-events:none;transform:translate(-50%,-8px);transition:opacity .25s,transform .25s}
.hm-calpop.on{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.hm-cal-head{display:grid;grid-template-columns:30px 1fr 30px;align-items:center;gap:8px;margin-bottom:14px}
.hm-cal-head .hm-k{margin:0;text-align:center}
.hm-side{display:flex;flex-direction:column;gap:22px;align-self:stretch;margin-top:46px;min-height:0;max-height:calc(100% - 46px);overflow-y:auto;padding-right:4px;scrollbar-width:thin;scrollbar-color:rgba(236,208,138,.3) transparent}
.hm-sys{padding:18px 20px 16px;border-radius:16px;background:rgba(255,255,255,.035)}
.hm-sys dl{display:grid;grid-template-columns:auto 1fr;gap:9px 18px;margin:0 0 18px;font:400 11.5px/1.3 'JetBrains Mono',monospace}
.hm-sys dt{letter-spacing:.18em;text-transform:uppercase;color:rgba(233,228,214,.46)}
.hm-sys dd{margin:0;text-align:right;letter-spacing:.06em}
.hm-sys .hm-goals{margin-bottom:16px}
.hm-goals li{margin-bottom:12px}
.hm-status{margin:0;padding-top:14px;border-top:1px solid rgba(255,255,255,.07);font:400 10px/1.3 'JetBrains Mono',monospace;letter-spacing:.24em;text-transform:uppercase;color:#ecd08a}
.hm-card.is-title .meta{margin:20px 0 0;font:400 10px/1.4 'JetBrains Mono',monospace;letter-spacing:.2em;text-transform:uppercase;color:#ecd08a}
@media (max-width:1100px){.hm-day-grid{grid-template-columns:minmax(0,1fr)}.hm-side{display:none}}
.hm-goals{margin:0;padding:0;list-style:none}
.hm-goals li{margin-bottom:12px}
.hm-goals .row{display:grid;grid-template-columns:1fr auto 16px;gap:10px;align-items:baseline;font:400 11.5px/1.3 'JetBrains Mono',monospace}
.hm-goals .n{letter-spacing:.16em;text-transform:uppercase;color:rgba(233,228,214,.72)}
.hm-goals .ok{text-align:right;color:rgba(233,228,214,.34)}
.hm-goals li.is-met .ok{color:#ecd08a}
.hm-goals .bar{display:block;height:2px;margin-top:8px;background:rgba(233,228,214,.1)}
.hm-goals .bar i{display:block;width:0;height:100%;background:rgba(233,228,214,.42);transition:width .9s cubic-bezier(.3,.1,.2,1)}
.hm-goals li.is-met .bar i{background:#ecd08a;box-shadow:0 0 8px rgba(236,208,138,.6)}
.hm-status{margin:0;padding-top:15px;border-top:1px solid rgba(236,208,138,.14);font:400 10px/1.3 'JetBrains Mono',monospace;letter-spacing:.24em;text-transform:uppercase;color:#ecd08a}
.hm-cal-head .m{width:30px;height:30px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.05);color:#ecd08a;font:400 14px/1 'JetBrains Mono',monospace;cursor:pointer;transition:border-color .25s,background .25s}
.hm-cal-head .m:hover:not(:disabled){border-color:rgba(236,208,138,.6);background:rgba(236,208,138,.06)}
.hm-cal-head .m:disabled{opacity:.25;cursor:default}
.hm-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.hm-cal-grid .w{padding-bottom:4px;text-align:center;font:400 9px/1 'JetBrains Mono',monospace;letter-spacing:.2em;color:rgba(233,228,214,.4)}
.hm-cal-grid .d{position:relative;aspect-ratio:1;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:none;font:400 12px/1 'JetBrains Mono',monospace;color:rgba(233,228,214,.26);cursor:default}
.hm-cal-grid .d.is-log{color:#ecd08a;cursor:pointer;background:radial-gradient(circle,rgba(236,208,138,.14) 0,transparent 70%);transition:background .25s,color .25s}
.hm-cal-grid .d.is-log:hover{background:rgba(236,208,138,.16);color:#fff3cf}
.hm-cal-grid .d.is-open{color:#fff3cf;background:rgba(236,208,138,.1)}
.hm-cal-grid .d.is-open::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(#ecd08a calc(var(--p) * 360deg),rgba(236,208,138,.2) 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px))}
.hm-cal-foot{margin:18px 0 6px;font:400 10px/1.4 'JetBrains Mono',monospace;letter-spacing:.2em;text-transform:uppercase;color:rgba(233,228,214,.62)}
.hm-cal-legend{margin:0;font:400 8.5px/1.4 'JetBrains Mono',monospace;letter-spacing:.18em;text-transform:uppercase;color:rgba(233,228,214,.36)}

.hm-nav{position:fixed;left:50%;bottom:26px;z-index:62;display:flex;align-items:center;gap:12px;transform:translateX(-50%);opacity:0;pointer-events:none;transition:opacity .5s}
body.hm-log-open .hm-nav{opacity:1;pointer-events:auto}
.hm-nav button{padding:13px 20px;border:1px solid rgba(236,230,216,.16);background:rgba(5,6,8,.72);color:var(--ivory,#e9e4d6);font:400 9px/1 'JetBrains Mono',monospace;letter-spacing:.3em;text-transform:uppercase;cursor:pointer;transition:border-color .3s,color .3s}
.hm-nav button:hover:not(:disabled){border-color:rgba(236,208,138,.55);color:#ecd08a}
.hm-nav button:disabled{opacity:.3;cursor:default}
.hm-nav .c{min-width:160px;text-align:center;font:400 9px/1 'JetBrains Mono',monospace;letter-spacing:.24em;color:#ecd08a}
.hm-lb{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:rgba(5,6,8,.93);opacity:0;pointer-events:none;transition:opacity .3s;cursor:zoom-out}
.hm-lb.on{opacity:1;pointer-events:auto}
.hm-lb .lbp,.hm-lb .lbn{position:absolute;top:50%;display:none;width:48px;height:48px;margin-top:-24px;border:1px solid rgba(236,208,138,.3);border-radius:50%;background:rgba(5,6,8,.6);color:#ecd08a;font:300 26px/1 'Cormorant Garamond',serif;cursor:pointer}
.hm-lb .lbp{left:4vw}.hm-lb .lbn{right:4vw}
.hm-lb.is-many .lbp,.hm-lb.is-many .lbn{display:block}
.hm-lb .lbp:hover,.hm-lb .lbn:hover{border-color:rgba(236,208,138,.7)}
.hm-lb img{max-width:min(86vw,1100px);max-height:78vh;border:1px solid rgba(236,208,138,.3)}
.hm-lb p{margin:0;font:400 9px/1 'JetBrains Mono',monospace;letter-spacing:.24em;text-transform:uppercase;color:rgba(233,228,214,.6)}
@media (prefers-reduced-motion:reduce){.hm-card.is-near,.hm-card.is-far{filter:brightness(.6)}.hm-card,.hm-day,.hm-veil,.hm-goals .bar i{transition:none}}

/* the portal: TAP LOGS in the dead centre of the mind */
.hm-portal{position:fixed;left:0;top:0;z-index:24;width:116px;height:116px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:0;border:0;border-radius:50%;background:none;color:var(--ivory,#e9e4d6);cursor:pointer;opacity:0;will-change:transform,opacity}
.hm-portal .t{font:300 27px/1 'Cormorant Garamond',serif;letter-spacing:.3em;padding-left:.3em;text-shadow:0 0 22px rgba(201,162,74,.35);transition:color .3s,text-shadow .3s}
.hm-portal .l{font:400 8.5px/1 'JetBrains Mono',monospace;letter-spacing:.5em;padding-left:.5em;color:rgba(236,208,138,.78);transition:color .3s}
.hm-portal.is-hot .t,.hm-portal:hover .t{color:#fff3cf;text-shadow:0 0 30px rgba(236,208,138,.7)}
.hm-portal.is-hot .l,.hm-portal:hover .l{color:#ecd08a}
.hm-portal:focus-visible{outline:1px solid rgba(236,208,138,.7);outline-offset:6px}
body.boot-active .hm-portal,body.hm-log-open .hm-portal{opacity:0!important;pointer-events:none!important}
/* typewriter on the front card */
.ty-rest{visibility:hidden}
.ty-caret{display:inline-block;width:2px;height:1em;margin:0 1px -0.12em;background:#ecd08a;animation:tyBlink .9s steps(1) infinite}
@keyframes tyBlink{50%{opacity:0}}
.hm-card.is-title dl{grid-template-columns:repeat(4,1fr);margin:24px 0 18px}
.hm-card.is-title .hm-goals li{margin-bottom:11px}
.hm-card.is-title .hm-status{margin-top:4px}
/* 1. the light of the hour */
@property --tod{syntax:'<color>';inherits:false;initial-value:rgba(0,0,0,0)}
.hm-tod{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 75% 65% at 50% 42%,var(--tod),transparent 72%);transition:--tod 1.6s ease}
.hm-day-grid{position:relative;z-index:1}
/* 3. photos breathe */
@keyframes hmKB{0%{transform:scale(1.02) translate(0,0)}100%{transform:scale(1.1) translate(-2%,-1.6%)}}
.hm-card.is-front figure img{animation:hmKB 16s ease-in-out infinite alternate}
/* 5. the closing card */
.hm-card.is-end .body{padding:34px 36px 32px}
.hm-card.is-end h3{margin:12px 0 22px;font:300 46px/1.05 'Cormorant Garamond',serif}
.hm-card.is-end .nextday{display:flex;flex-direction:column;gap:8px;width:100%;padding:18px 20px;border:0;border-radius:14px;background:rgba(255,255,255,.05);color:var(--ivory,#e9e4d6);text-align:left;cursor:pointer;transition:background .25s}
.hm-card.is-end .nextday:hover{background:rgba(255,255,255,.1)}
.hm-card.is-end .nextday .l{font:400 8.5px/1 'JetBrains Mono',monospace;letter-spacing:.24em;color:rgba(233,228,214,.5)}
.hm-card.is-end .nextday b{font:300 24px/1.2 Inter,system-ui,sans-serif}
.hm-card.is-end .nextday .n{font:400 10px/1 'JetBrains Mono',monospace;letter-spacing:.2em;color:#ecd08a}
.hm-card.is-end .hint{margin:18px 0 0;font:400 8.5px/1.4 'JetBrains Mono',monospace;letter-spacing:.24em;text-transform:uppercase;color:rgba(233,228,214,.34)}
@media (prefers-reduced-motion:reduce){.hm-card.is-front figure img{animation:none}.hm-tod{transition:none}}
/* the sound mixer (SOUND opens it): music and FX faders */
.hm-mixer{position:fixed;z-index:95;width:272px;padding:16px 18px 14px;border-radius:16px;background:rgba(10,11,15,.96);box-shadow:0 26px 70px -18px rgba(0,0,0,.9),0 0 0 1px rgba(236,208,138,.16);color:var(--ivory,#e9e4d6);opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .22s,transform .22s}
.hm-mixer.on{opacity:1;pointer-events:auto;transform:none}
.hm-mx-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.hm-mx-head .hm-k{margin:0}
.hm-mx-power{display:flex;align-items:center;gap:10px;padding:2px 0;border:0;background:none;color:rgba(233,228,214,.5);font:400 9.5px/1 'JetBrains Mono',monospace;letter-spacing:.22em;cursor:pointer}
.hm-mx-power>span:first-child{min-width:3.2em;text-align:right;transition:color .25s}
.hm-mx-power .sw{position:relative;width:42px;height:22px;border-radius:999px;border:1px solid rgba(233,228,214,.22);background:rgba(255,255,255,.04);transition:border-color .3s,background .3s}
.hm-mx-power .sw i{position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:rgba(233,228,214,.5);transition:transform .3s cubic-bezier(.2,.8,.2,1),background .3s,box-shadow .3s}
.hm-mx-power.on{color:#ecd08a}
.hm-mx-power.on .sw{border-color:rgba(201,162,74,.6);background:rgba(201,162,74,.16)}
.hm-mx-power.on .sw i{transform:translateX(20px);background:#ecd08a;box-shadow:0 0 10px rgba(236,208,138,.55)}
.hm-mx-power:focus-visible{outline:1px solid rgba(236,208,138,.6);outline-offset:4px;border-radius:999px}
.hm-mx-row{padding:12px 0;border-top:1px solid rgba(255,255,255,.07)}
.hm-mx-row .t{display:grid;grid-template-columns:auto 1fr auto auto;align-items:baseline;gap:10px;margin-bottom:10px}
.hm-mx-row .n{font:400 10px/1 'JetBrains Mono',monospace;letter-spacing:.24em;color:#ecd08a}
.hm-mx-row .s{font:400 8.5px/1 'JetBrains Mono',monospace;letter-spacing:.12em;color:rgba(233,228,214,.38);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.hm-mx-row .v{font:400 10px/1 'JetBrains Mono',monospace;letter-spacing:.08em;color:rgba(233,228,214,.75)}
.hm-mx-row .m{width:24px;height:22px;padding:0;border:1px solid rgba(255,255,255,.12);border-radius:6px;background:none;color:rgba(233,228,214,.55);font:400 9px/1 'JetBrains Mono',monospace;cursor:pointer}
.hm-mx-row .m.on{border-color:#d8584b;color:#ffb3aa;background:rgba(216,88,75,.15)}
.hm-mx-row input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;margin:0;border-radius:999px;background:linear-gradient(90deg,#ecd08a var(--p,100%),rgba(255,255,255,.1) var(--p,100%));cursor:pointer}
.hm-mx-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#fff3cf;box-shadow:0 0 0 3px rgba(236,208,138,.25)}
.hm-mx-row input[type=range]::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:#fff3cf}
.hm-mixer.is-off .hm-mx-row{opacity:.45}
.hm-mx-foot{margin:6px 0 0;font:400 8px/1.3 'JetBrains Mono',monospace;letter-spacing:.2em;text-transform:uppercase;color:rgba(233,228,214,.3)}
/* the 24-hour line as a loading bar */
.hm-strip .fill{position:absolute;left:0;top:-.5px;width:0;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(236,208,138,.25),#ecd08a 60%,#fff3cf);background-size:200% 100%;box-shadow:0 0 10px rgba(236,208,138,.55);transition:width .9s cubic-bezier(.3,.1,.2,1);animation:hmLoad 1.8s linear infinite;pointer-events:none}
.hm-strip .fill.is-done{animation:none;background:#ecd08a}
@keyframes hmLoad{0%{background-position:100% 0}100%{background-position:-100% 0}}
.hm-strip .dot{background:rgba(236,208,138,.22)}
.hm-strip .dot.past{background:rgba(236,208,138,.7)}
.hm-strip .h{white-space:nowrap}
@media (prefers-reduced-motion:reduce){.hm-strip .fill{animation:none;transition:none}}
.hm-strip .dot.on{background:#ecd08a}

/* DREAM thoughts: one line beside the neuron the camera has reached (the neuron sits at the centre of the screen) */
.hm-dream-thought{position:fixed;left:calc(50% + 34px);top:calc(50% - 10px);z-index:20;max-width:min(520px,42vw);pointer-events:none;white-space:pre-wrap;color:#efe6d0;font:400 15px/1.45 'JetBrains Mono',monospace;letter-spacing:.04em;text-shadow:0 0 18px rgba(0,0,0,.9),0 0 28px rgba(201,162,74,.25);opacity:0;transform:translateY(4px);transition:opacity .25s,transform .25s}
.hm-dream-thought.on{opacity:1;transform:none}
.hm-dream-thought.k-hero,.hm-dream-thought.k-log{font:300 26px/1.25 'Cormorant Garamond',serif;letter-spacing:.01em}
.hm-dream-thought.k-gita{font:400 22px/1.3 'Tiro Devanagari Hindi',serif;color:#e7c879}
.hm-dream-thought.k-code{color:#a9d9b4}.hm-dream-thought.k-mkt{color:#ecd08a}.hm-dream-thought.k-bio{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:rgba(233,228,214,.75)}
.hm-dream-thought.is-fast{transition:none}.hm-dream-thought.is-fast.on{animation:hmCut .14s steps(2) 1}
.hm-dream-thought.is-slow{transition:opacity 1.1s ease,transform 1.6s ease;transform:translateY(10px)}.hm-dream-thought.is-slow.on{transform:none}
@keyframes hmCut{0%{clip-path:inset(0 0 55% 0);transform:translateX(6px)}50%{clip-path:inset(40% 0 0 0);transform:translateX(-4px)}100%{clip-path:none;transform:none}}
body.hm-log-open .hm-dream-thought{display:none}

/* the brain-state switch carries into the logs: same panel, same place, above the reading view (its music follows it) */
body.hm-log-open #dial{z-index:63;opacity:1;pointer-events:auto}
@media (max-width:1700px){.hm-car-ctl{width:min(980px,calc(100vw - 700px))}}

/* hint, fixed just above the day line: first card = one arrow floating right; after that = a quiet, still ← → */
.hm-swipe{display:flex;align-items:center;justify-content:center;gap:26px;height:14px;margin:12px auto 0;pointer-events:none}
.hm-swipe svg{display:block;width:30px;height:12px;fill:none;stroke:#ecd08a;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hm-swipe .ar{opacity:.55}
.hm-swipe .ar.l svg{transform:scaleX(-1)}
.hm-swipe.is-first .ar.l{display:none}
.hm-swipe.is-first .ar.r{opacity:1;filter:drop-shadow(0 0 6px rgba(236,208,138,.5));animation:hmFloatR 2s ease-in-out infinite}
@keyframes hmFloatR{0%,100%{transform:translateX(-6px);opacity:.45}50%{transform:translateX(10px);opacity:1}}
@media (prefers-reduced-motion:reduce){.hm-swipe .ar{animation:none}}

/* the way back to the site the logs were opened from: top-left, HUD lettering; the SYS panel moves down to make room */
.hm-back-site{position:fixed;top:40px;left:26px;z-index:64;font:400 9.5px/1 'JetBrains Mono',monospace;letter-spacing:.3em;color:#ecd08a;text-decoration:none;padding:6px 0;border-bottom:1px solid rgba(201,162,74,.45);transition:color .25s,border-color .25s}
.hm-back-site:hover,.hm-back-site:focus-visible{color:#fff3cf;border-color:#ecd08a;outline:none}
body:has(.hm-back-site) #tl{top:82px!important}
body.boot-active .hm-back-site{opacity:0;pointer-events:none}

/* ONE control deck at the bottom right (sound, brain state, now playing, faders); the SOUND button retired */
body #snd{display:none!important}
#musicdeck.hm-deck{width:330px}
.hm-dk-head{display:flex;align-items:center;justify-content:space-between;padding:0 0 10px;margin:0 0 10px;border-bottom:1px solid rgba(255,255,255,.07)}
.hm-dk-head .hm-k,.hm-dk-bs .hm-k{margin:0}
.hm-dk-bs{padding:0 0 11px;margin:0 0 10px;border-bottom:1px solid rgba(255,255,255,.07)}
.hm-dk-bs .seg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:9px}
.hm-dk-bs button{padding:7px 4px 6px;border:1px solid rgba(233,228,214,.1);border-radius:8px;background:rgba(255,255,255,.015);color:rgba(233,228,214,.55);cursor:pointer;font:400 7px/1 'JetBrains Mono',monospace;letter-spacing:.16em;text-transform:uppercase;text-align:center;transition:border-color .25s,background .25s,color .25s}
.hm-dk-bs button b{display:block;margin:0 0 4px;font-size:9.5px;font-weight:400;letter-spacing:.1em;text-transform:none;color:rgba(233,228,214,.85)}
.hm-dk-bs button:hover{border-color:rgba(201,162,74,.32)}
.hm-dk-bs button.on{border-color:rgba(201,162,74,.55);background:linear-gradient(135deg,rgba(201,162,74,.13),rgba(201,162,74,.03));color:#ecd08a}
.hm-dk-bs button.on b{color:#ecd08a}
.hm-dk-mix{margin-top:10px;border-top:1px solid rgba(255,255,255,.07)}
.hm-dk-mix .hm-mx-row{padding:9px 0 4px;border-top:0}
#musicdeck.is-off .hm-dk-mix{opacity:.45}
body.hm-log-open #musicdeck{z-index:63}
/* the brain-state monitor in the old switch's frame */
#dial .eeg{display:block;width:100%;height:54px;margin-top:10px}
#dial .eeg-read{color:#ecd08a!important;font-size:8.5px!important;letter-spacing:.18em!important;margin-top:5px!important}

/* the deck, compact: about the FPS box's size so it never eats the view */
#musicdeck.hm-deck{width:300px;min-height:0}
#musicdeck.hm-deck #mptab{width:34px}
#musicdeck.hm-deck #mpbody{margin-left:34px;padding:10px 12px 10px}
#musicdeck.hm-deck .hm-dk-head{padding:0 0 7px;margin:0 0 7px}
#musicdeck.hm-deck .hm-dk-head .hm-k{font-size:8.5px}
#musicdeck.hm-deck .hm-mx-power{font-size:8px;gap:7px}
#musicdeck.hm-deck .hm-mx-power .sw{width:32px;height:17px}
#musicdeck.hm-deck .hm-mx-power .sw i{left:2px;top:2px;width:11px;height:11px}
#musicdeck.hm-deck .hm-mx-power.on .sw i{transform:translateX(15px)}
#musicdeck.hm-deck .hm-dk-bs{padding:0 0 8px;margin:0 0 7px}
#musicdeck.hm-deck .hm-dk-bs .hm-k{font-size:7px;color:rgba(236,208,138,.75)}
#musicdeck.hm-deck .hm-dk-bs .seg{gap:5px;margin-top:6px}
#musicdeck.hm-deck .hm-dk-bs button{display:flex;align-items:baseline;justify-content:center;gap:5px;padding:6px 2px;border-radius:6px;font-size:6.5px;letter-spacing:.12em}
#musicdeck.hm-deck .hm-dk-bs button b{display:inline;margin:0;font-size:8.5px}
#musicdeck.hm-deck #mpmeta small{display:none}
#musicdeck.hm-deck #mptitle{font-size:15px}
#musicdeck.hm-deck #mpcontrols{margin-top:6px}
#musicdeck.hm-deck #mpcontrols button{width:26px;height:21px;font-size:9px}
#musicdeck.hm-deck #mpplay{width:30px!important}
#musicdeck.hm-deck #mptime{min-width:0;font-size:6.5px}
#musicdeck.hm-deck #mpprogress{margin-top:6px}
#musicdeck.hm-deck .hm-dk-mix{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px;padding-top:8px}
#musicdeck.hm-deck .hm-dk-mix .hm-mx-row{padding:0}
#musicdeck.hm-deck .hm-dk-mix .hm-mx-row .t{grid-template-columns:auto 1fr auto;gap:6px;margin-bottom:7px;align-items:center}
#musicdeck.hm-deck .hm-dk-mix .hm-mx-row .n{font-size:7.5px;letter-spacing:.2em}
#musicdeck.hm-deck .hm-dk-mix .hm-mx-row .v{font-size:7.5px;text-align:right}
#musicdeck.hm-deck .hm-dk-mix .hm-mx-row .m{width:17px;height:15px;font-size:6.5px;border-radius:4px}
#musicdeck.hm-deck .hm-dk-mix input[type=range]{height:3px}
#musicdeck.hm-deck .hm-dk-mix input[type=range]::-webkit-slider-thumb{width:11px;height:11px}

/* deck, readable: bigger words, no sound row; MUSIC / FX each with an ON/OFF switch, no percentages */
#musicdeck.hm-deck #mpbody{padding:12px 14px 12px}
#musicdeck.hm-deck .hm-dk-bs{padding:0 0 10px;margin:0 0 9px}
#musicdeck.hm-deck .hm-k-row{display:flex;align-items:baseline;justify-content:space-between}
#musicdeck.hm-deck .hm-dk-bs .hm-k{font-size:8.5px;color:#ecd08a}
#musicdeck.hm-deck .hm-dk-bs .hz{font:400 8.5px/1 'JetBrains Mono',monospace;letter-spacing:.16em;color:rgba(233,228,214,.5)}
#musicdeck.hm-deck .hm-dk-bs .seg{margin-top:8px;gap:6px}
#musicdeck.hm-deck .hm-dk-bs button{display:block;padding:9px 2px 8px;font:400 10px/1 'JetBrains Mono',monospace;letter-spacing:.22em;text-indent:.22em;color:rgba(233,228,214,.62)}
#musicdeck.hm-deck .hm-dk-bs button.on{color:#ecd08a}
#musicdeck.hm-deck #mptitle{font-size:17px}
#musicdeck.hm-deck .hm-dk-mix{gap:16px;margin-top:10px;padding-top:10px}
#musicdeck.hm-deck .hm-dk-mix .hm-mx-row .t{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
#musicdeck.hm-deck .hm-dk-mix .hm-mx-row .n{font-size:10px;letter-spacing:.24em;color:#ecd08a}
.hm-ch-sw{padding:0;border:0;background:none;cursor:pointer}
.hm-ch-sw .sw{position:relative;display:block;width:30px;height:16px;border-radius:999px;border:1px solid rgba(233,228,214,.22);background:rgba(255,255,255,.04);transition:border-color .3s,background .3s}
.hm-ch-sw .sw i{position:absolute;left:2px;top:2px;width:10px;height:10px;border-radius:50%;background:rgba(233,228,214,.5);transition:transform .3s cubic-bezier(.2,.8,.2,1),background .3s,box-shadow .3s}
.hm-ch-sw.on .sw{border-color:rgba(201,162,74,.6);background:rgba(201,162,74,.16)}
.hm-ch-sw.on .sw i{transform:translateX(14px);background:#ecd08a;box-shadow:0 0 8px rgba(236,208,138,.55)}
.hm-ch-sw:focus-visible{outline:1px solid rgba(236,208,138,.6);outline-offset:3px;border-radius:999px}
#musicdeck.hm-deck .hm-dk-mix input[type=range]::-webkit-slider-thumb{width:13px;height:13px}
#musicdeck.is-off .hm-dk-mix input[type=range]{opacity:.45}
#musicdeck.is-off .hm-dk-mix{opacity:1}

/* deck order: MUSIC / FX first, with bigger, thicker switches */
#musicdeck.hm-deck .hm-dk-mix{margin:0 0 10px;padding:0 0 12px;border-top:0;border-bottom:1px solid rgba(255,255,255,.07)}
#musicdeck.hm-deck .hm-dk-mix .hm-mx-row .t{margin-bottom:11px}
#musicdeck.hm-deck .hm-dk-mix .hm-mx-row .n{font-size:11px;letter-spacing:.24em}
.hm-ch-sw .sw{width:42px;height:22px}
.hm-ch-sw .sw i{left:3px;top:3px;width:14px;height:14px}
.hm-ch-sw.on .sw i{transform:translateX(20px)}
/* inside a day the deck and the brain monitor step back into the backdrop; hover brings either back */
body.hm-log-open #musicdeck.hm-deck,body.hm-log-open #dial{opacity:.34;filter:blur(1.2px) saturate(.6);transition:opacity .45s ease,filter .45s ease,transform .48s cubic-bezier(.2,.8,.2,1)}
body.hm-log-open #musicdeck.hm-deck:hover,body.hm-log-open #musicdeck.hm-deck:focus-within,body.hm-log-open #dial:hover{opacity:1;filter:none}

/* the date as a desk-calendar tile with a day back / a day on either side */
.hm-car-head{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:6px}
.hm-car-head .step{width:38px;height:38px;padding:0;justify-content:center;border-radius:50%;border:1px solid rgba(201,162,74,.28);background:rgba(10,11,15,.6)}
.hm-car-head .step b{font-size:22px;line-height:1;margin-top:-2px}
.hm-car-head .step:hover:not(:disabled){border-color:#ecd08a;background:rgba(201,162,74,.1)}
.hm-date.hm-tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:0;width:66px;padding:0 0 7px;border:1px solid rgba(201,162,74,.42);border-radius:10px;overflow:visible;background:rgba(14,15,20,.94);box-shadow:0 12px 30px -12px rgba(0,0,0,.85);transition:transform .2s,border-color .2s}
.hm-tile .mo{position:relative;display:block;width:100%;padding:5px 0 4px;border-radius:9px 9px 0 0;background:linear-gradient(180deg,#d9b25c,#b38c3c);color:#14110a;font:500 8.5px/1 'JetBrains Mono',monospace;letter-spacing:.24em;text-indent:.24em;text-align:center}
.hm-tile .mo::before,.hm-tile .mo::after{content:'';position:absolute;top:-4px;width:4px;height:8px;border-radius:2px;background:#0e0f14;border:1px solid rgba(236,208,138,.7)}
.hm-tile .mo::before{left:17px}.hm-tile .mo::after{right:17px}
.hm-tile .dd{display:block;margin-top:5px;font:300 28px/1 'Cormorant Garamond',serif;color:#f3ead6}
.hm-tile .wd{display:block;margin-top:3px;font:400 7.5px/1 'JetBrains Mono',monospace;letter-spacing:.24em;text-indent:.24em;color:rgba(233,228,214,.55)}
.hm-date.hm-tile:hover,.hm-date.hm-tile[aria-expanded="true"]{transform:translateY(-1px);border-color:#ecd08a;background:rgba(18,19,25,.96)}

/* calendar tile, refined: glass page with a gold hairline, month · year label, a tear-line, upright figures, hairline binding tabs,
   and a second page peeking behind like a tear-off pad */
.hm-date.hm-tile{width:78px;padding:0 0 9px;border:1px solid rgba(201,162,74,.38);border-radius:12px;background:linear-gradient(180deg,rgba(28,27,24,.92),rgba(12,13,17,.94));box-shadow:0 1px 0 rgba(255,243,207,.06) inset,0 3px 0 -1px rgba(20,21,26,.95),0 3px 0 0 rgba(201,162,74,.18),0 16px 34px -14px rgba(0,0,0,.9)}
.hm-tile .mo{padding:8px 0 7px;border-radius:0;background:none;color:#ecd08a;font:400 7.5px/1 'JetBrains Mono',monospace;letter-spacing:.2em;text-indent:.2em;border-bottom:1px dashed rgba(201,162,74,.32)}
.hm-tile .mo::before,.hm-tile .mo::after{top:-7px;width:1px;height:10px;border:0;border-radius:0;background:linear-gradient(180deg,rgba(236,208,138,0),#ecd08a)}
.hm-tile .mo::before{left:22px}.hm-tile .mo::after{right:22px}
.hm-tile .dd{margin-top:8px;font:300 32px/1 'Cormorant Garamond',serif;font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1;color:#f6eedc;text-shadow:0 0 18px rgba(236,208,138,.18)}
.hm-tile .wd{margin-top:5px;font-size:7.5px;letter-spacing:.3em;text-indent:.3em;color:rgba(233,228,214,.5)}
.hm-date.hm-tile:hover,.hm-date.hm-tile[aria-expanded="true"]{border-color:rgba(236,208,138,.8);box-shadow:0 1px 0 rgba(255,243,207,.08) inset,0 3px 0 -1px rgba(20,21,26,.95),0 3px 0 0 rgba(201,162,74,.3),0 0 26px -6px rgba(236,208,138,.35),0 16px 34px -14px rgba(0,0,0,.9)}
.hm-car-head .step{width:34px;height:34px;border:1px solid rgba(201,162,74,.22);background:rgba(10,11,15,.45)}
.hm-car-head .step b{font-size:20px}

/* calendar tile, polish: binding rings pierce the top edge, a faintly tinted month band, arrows smaller and closer */
.hm-car-head{gap:12px}
.hm-date.hm-tile{width:76px;border-radius:11px}
.hm-tile .mo{padding:9px 0 7px;border-radius:10px 10px 0 0;background:linear-gradient(180deg,rgba(201,162,74,.14),rgba(201,162,74,.05))}
.hm-tile .mo::before,.hm-tile .mo::after{top:-5px;width:3px;height:10px;border-radius:2px;background:#16161a;border:1px solid rgba(236,208,138,.75);box-shadow:0 0 6px rgba(236,208,138,.25)}
.hm-tile .mo::before{left:20px}.hm-tile .mo::after{right:20px}
.hm-car-head .step{width:30px;height:30px;border-color:rgba(201,162,74,.3);background:rgba(10,11,15,.55);transition:border-color .25s,background .25s,box-shadow .25s}
.hm-car-head .step b{font:300 18px/1 'Cormorant Garamond',serif;margin-top:-2px}
.hm-car-head .step:hover:not(:disabled){border-color:#ecd08a;background:rgba(201,162,74,.12);box-shadow:0 0 14px -2px rgba(236,208,138,.4)}
.hm-car-head .step:disabled{opacity:.25}

/* the date as a HUD instrument (fits the page): a glass square with gold corner brackets, hairlines out to arrows that match the
   bottom bar's round buttons, so the top reads as the day line (days) mirroring the bottom one (hours) */
.hm-car-head{gap:0}
.hm-car-head .ln{display:block;width:clamp(40px,7vw,110px);height:1px}
.hm-car-head .ln.l{background:linear-gradient(90deg,rgba(201,162,74,.08),rgba(201,162,74,.45))}
.hm-car-head .ln.r{background:linear-gradient(90deg,rgba(201,162,74,.45),rgba(201,162,74,.08))}
.hm-car-head .step{width:40px;height:40px;border:0;border-radius:50%;background:rgba(255,255,255,.04);box-shadow:none}
.hm-car-head .step b{font:300 22px/1 'Cormorant Garamond',serif;color:#ecd08a;margin-top:-2px}
.hm-car-head .step:hover:not(:disabled){background:rgba(255,255,255,.09);box-shadow:none}
.hm-car-head .step:disabled{opacity:.2}
.hm-date.hm-tile{width:76px;padding:9px 0 9px;margin:0 12px;border:1px solid rgba(233,228,214,.1);border-radius:6px;box-shadow:0 14px 34px -14px rgba(0,0,0,.9);
  background:
   linear-gradient(#ecd08a,#ecd08a) top left/10px 1px no-repeat,linear-gradient(#ecd08a,#ecd08a) top left/1px 10px no-repeat,
   linear-gradient(#ecd08a,#ecd08a) top right/10px 1px no-repeat,linear-gradient(#ecd08a,#ecd08a) top right/1px 10px no-repeat,
   linear-gradient(#ecd08a,#ecd08a) bottom left/10px 1px no-repeat,linear-gradient(#ecd08a,#ecd08a) bottom left/1px 10px no-repeat,
   linear-gradient(#ecd08a,#ecd08a) bottom right/10px 1px no-repeat,linear-gradient(#ecd08a,#ecd08a) bottom right/1px 10px no-repeat,
   radial-gradient(ellipse at 50% 0,rgba(201,162,74,.12),transparent 70%),linear-gradient(180deg,rgba(16,17,22,.94),rgba(9,10,13,.94))}
.hm-tile .mo{padding:0;border:0;border-radius:0;background:none;color:#ecd08a;font:400 7.5px/1 'JetBrains Mono',monospace;letter-spacing:.24em;text-indent:.24em}
.hm-tile .mo::before,.hm-tile .mo::after{display:none}
.hm-tile .dd{margin-top:8px;font-size:32px}
.hm-tile .wd{margin-top:6px}
.hm-date.hm-tile:hover,.hm-date.hm-tile[aria-expanded="true"]{transform:none;border-color:rgba(236,208,138,.45);box-shadow:0 0 24px -8px rgba(236,208,138,.35),0 14px 34px -14px rgba(0,0,0,.9)}

/* arrows back to the clear outlined circles, close to the square; the date steps back while the entries play */
.hm-car-head{gap:12px}
.hm-car-head .step{width:34px;height:34px;border:1px solid rgba(201,162,74,.38);border-radius:50%;background:rgba(10,11,15,.55);transition:border-color .25s,background .25s,box-shadow .25s}
.hm-car-head .step b{font:300 20px/1 'Cormorant Garamond',serif;color:#ecd08a;margin-top:-2px}
.hm-car-head .step:hover:not(:disabled){border-color:#ecd08a;background:rgba(201,162,74,.12);box-shadow:0 0 14px -2px rgba(236,208,138,.4)}
.hm-car-head .step:disabled{opacity:.25}
.hm-date.hm-tile{margin:0}
.hm-car-head{transition:opacity .45s ease,filter .45s ease}
.hm-car-head.is-quiet{opacity:.3;filter:blur(1.2px) saturate(.6)}
.hm-car-head.is-quiet:hover,.hm-car-head.is-quiet:focus-within{opacity:1;filter:none}

/* one "back" button, top left, always one level up: inside a day = BACK TO MIND; on the mind = back to the site it came from */
.hm-back-site,.hm-back-mind{position:fixed;top:34px;left:26px;z-index:64;padding:12px 18px;border:1px solid rgba(201,162,74,.45);border-radius:0;background:rgba(5,6,8,.72);color:#ecd08a;font:400 10.5px/1 'JetBrains Mono',monospace;letter-spacing:.3em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:border-color .3s,color .3s,background .3s,opacity .4s}
.hm-back-site:hover,.hm-back-site:focus-visible,.hm-back-mind:hover,.hm-back-mind:focus-visible{border-color:#ecd08a;color:#fff3cf;background:rgba(201,162,74,.1);outline:none}
.hm-back-mind{opacity:0;pointer-events:none}
body.hm-log-open .hm-back-mind{opacity:1;pointer-events:auto}
body.hm-log-open .hm-back-site{opacity:0;pointer-events:none}
body:has(.hm-back-site) #tl{top:96px!important}
.hm-nav .c{font-size:10px}

/* the PRO · LOGS · ART knob sits in the bottom-right corner here too: the control deck moves up above it, and inside a day the knob
   steps back with the deck (hover restores) */
#musicdeck.hm-deck{bottom:112px!important}
body.hm-log-open .mode-knob{opacity:.34;filter:blur(1px) saturate(.6)!important}
body.hm-log-open .mode-knob:hover,body.hm-log-open .mode-knob:focus-visible{opacity:1;filter:drop-shadow(0 7px 9px rgba(0,0,0,.48))!important}
body.boot-active .mode-knob{opacity:0;pointer-events:none}

/* lighter BACK TO MIND (inside a day); no site button on the mind view any more, so the SYS panel returns to its place */
.hm-back-mind{padding:10px 16px;border-color:rgba(201,162,74,.28);background:rgba(5,6,8,.45);font-size:10px}
/* MUSIC / FX: bigger names and switches; each fader stays folded until its row is hovered (or its name tapped) */
#musicdeck.hm-deck .hm-dk-mix .hm-mx-row .t{margin-bottom:0}
#musicdeck.hm-deck .hm-dk-mix .hm-mx-row .n{font-size:12px;letter-spacing:.26em;cursor:pointer}
.hm-ch-sw .sw{width:46px;height:24px}
.hm-ch-sw .sw i{left:3px;top:3px;width:16px;height:16px}
.hm-ch-sw.on .sw i{transform:translateX(22px)}
#musicdeck.hm-deck .hm-dk-mix input[type=range]{display:block;max-height:0;margin:0;opacity:0;overflow:hidden;pointer-events:none;transition:max-height .28s ease,margin .28s ease,opacity .2s ease}
#musicdeck.hm-deck .hm-dk-mix .hm-mx-row:hover input[type=range],#musicdeck.hm-deck .hm-dk-mix .hm-mx-row:focus-within input[type=range],#musicdeck.hm-deck .hm-dk-mix .hm-mx-row.open input[type=range]{max-height:22px;margin-top:12px;opacity:1;pointer-events:auto}
/* BRAIN STATE: the chosen one rises out of the row; the others sit back but lift on hover */
#musicdeck.hm-deck .hm-dk-bs .seg{margin-top:12px;gap:8px;padding:4px 0 2px}
#musicdeck.hm-deck .hm-dk-bs button{position:relative;padding:11px 2px 10px;font-size:10.5px;opacity:.6;transition:transform .25s cubic-bezier(.2,.8,.2,1),opacity .25s,border-color .25s,background .25s,box-shadow .25s,color .25s}
#musicdeck.hm-deck .hm-dk-bs button:hover:not(.on){opacity:1;transform:translateY(-1px);border-color:rgba(201,162,74,.45)}
#musicdeck.hm-deck .hm-dk-bs button.on{opacity:1;z-index:1;transform:translateY(-2px) scale(1.07);border-color:#ecd08a;color:#fff3cf;background:linear-gradient(180deg,rgba(236,208,138,.26),rgba(201,162,74,.08));box-shadow:0 0 20px -3px rgba(236,208,138,.5),0 8px 16px -8px rgba(0,0,0,.85)}
#musicdeck.hm-deck .hm-dk-bs button.on::after{content:"";position:absolute;left:50%;bottom:4px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#ecd08a;box-shadow:0 0 8px #ecd08a}

/* BRAIN STATE · a modern segmented switch: one recessed track, a solid gold pill with a soft backlight glides to the chosen state */
#musicdeck.hm-deck .hm-dk-bs .seg{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:12px;padding:4px;border-radius:12px;background:rgba(255,255,255,.035);box-shadow:inset 0 1px 3px rgba(0,0,0,.65),inset 0 0 0 1px rgba(255,255,255,.03);isolation:isolate}
#musicdeck.hm-deck .hm-dk-bs .seg .ind{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / 3);border-radius:9px;background:linear-gradient(180deg,#f3dea4,#d4b062);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 6px 14px -6px rgba(0,0,0,.85),0 0 22px -2px rgba(236,208,138,.55);transform:translateX(calc(var(--i,1) * 100%));transition:transform .42s cubic-bezier(.2,.9,.25,1.12)}
#musicdeck.hm-deck .hm-dk-bs .seg .ind::before{content:"";position:absolute;z-index:-1;inset:-12px -8px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(236,208,138,.4),transparent 70%);filter:blur(6px)}
#musicdeck.hm-deck .hm-dk-bs button,#musicdeck.hm-deck .hm-dk-bs button:hover:not(.on),#musicdeck.hm-deck .hm-dk-bs button.on{position:relative;z-index:1;padding:10px 2px 9px;border:0;border-radius:9px;background:none;box-shadow:none;transform:none;opacity:1;font:500 10.5px/1 'JetBrains Mono',monospace;letter-spacing:.22em;text-indent:.22em;color:rgba(233,228,214,.5);transition:color .3s}
#musicdeck.hm-deck .hm-dk-bs button:hover:not(.on){color:#f3ead6}
#musicdeck.hm-deck .hm-dk-bs button.on{color:#17130a}
#musicdeck.hm-deck .hm-dk-bs button.on::after{display:none}
#musicdeck.hm-deck .hm-dk-bs button:focus{outline:none}
#musicdeck.hm-deck .hm-dk-bs button:focus-visible{outline:1px solid rgba(236,208,138,.7);outline-offset:-3px}
/* MUSIC / FX · one full-width fader for the hovered channel: track, a visible knob, and its percentage */
#musicdeck.hm-deck .hm-mix-heads{display:grid;grid-template-columns:1fr 1fr;gap:16px}
#musicdeck.hm-deck .hm-fader{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;max-height:0;margin:0;opacity:0;overflow:hidden;transition:max-height .28s ease,margin .28s ease,opacity .2s ease}
#musicdeck.hm-deck .hm-dk-mix[data-show] .hm-fader{max-height:40px;margin-top:12px;opacity:1;overflow:visible}
#musicdeck.hm-deck .hm-fader input[type=range]{display:none;max-height:none;margin:0;opacity:1;pointer-events:auto;-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:999px;background:linear-gradient(90deg,#ecd08a var(--p,100%),rgba(255,255,255,.12) var(--p,100%));cursor:pointer}
#musicdeck.hm-deck .hm-dk-mix[data-show="music"] .hm-fader .rg-music,#musicdeck.hm-deck .hm-dk-mix[data-show="fx"] .hm-fader .rg-fx{display:block}
#musicdeck.hm-deck .hm-fader input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#fff3cf;box-shadow:0 0 0 4px rgba(236,208,138,.22),0 0 12px rgba(236,208,138,.5)}
#musicdeck.hm-deck .hm-fader input[type=range]::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:#fff3cf}
#musicdeck.hm-deck .hm-fader .fl{min-width:74px;text-align:right;font:400 10px/1 'JetBrains Mono',monospace;letter-spacing:.16em;color:#ecd08a}
#musicdeck.hm-deck .hm-dk-mix[data-show="music"] .hm-mx-row:nth-child(1) .n,#musicdeck.hm-deck .hm-dk-mix[data-show="fx"] .hm-mx-row:nth-child(2) .n{color:#fff3cf;text-shadow:0 0 10px rgba(236,208,138,.4)}
.hm-ch-sw:focus{outline:none}
#musicdeck.hm-deck .hm-dk-mix{display:block}
/* the brain-state pill in the ENTER DREAM language: dark navy glass, a blue light from the left, fine blue edge, light text, the dream orb */
#musicdeck.hm-deck .hm-dk-bs .seg .ind{border:1px solid rgba(103,146,210,.42);border-left-color:rgba(103,146,210,.78);background:radial-gradient(circle at 16% 50%,rgba(103,146,210,.3),transparent 60%),linear-gradient(145deg,rgba(20,26,40,.96),rgba(7,9,15,.92));box-shadow:inset 0 1px rgba(255,255,255,.05),0 0 18px rgba(103,146,210,.2),0 6px 14px -6px rgba(0,0,0,.85)}
#musicdeck.hm-deck .hm-dk-bs .seg .ind::before{background:radial-gradient(ellipse at center,rgba(103,146,210,.3),transparent 70%)}
#musicdeck.hm-deck .hm-dk-bs button.on{color:#eef2fb;text-shadow:0 0 10px rgba(103,146,210,.35)}
#musicdeck.hm-deck .hm-dk-bs button.on::before{content:"";display:inline-block;width:6px;height:6px;margin:0 8px 1px 0;vertical-align:middle;border:1px solid rgba(103,146,210,.8);border-radius:50%;box-shadow:0 0 10px rgba(103,146,210,.5)}

/* BRAIN STATE, final: the gliding carrier is invisible; its face is the dream-glass pill, lifted a touch off the track, and it pops
   (a quick rise and settle) whenever a new state is chosen. No orb. */
#musicdeck.hm-deck .hm-dk-bs .seg .ind,#musicdeck.hm-deck .hm-dk-bs .seg .ind::before{background:none;border:0;box-shadow:none}
#musicdeck.hm-deck .hm-dk-bs .seg .ind::before{display:none}
#musicdeck.hm-deck .hm-dk-bs .seg .face{position:absolute;inset:0;border-radius:9px;border:1px solid rgba(103,146,210,.42);border-left-color:rgba(103,146,210,.78);background:radial-gradient(circle at 16% 50%,rgba(103,146,210,.3),transparent 60%),linear-gradient(145deg,rgba(20,26,40,.97),rgba(7,9,15,.94));box-shadow:inset 0 1px rgba(255,255,255,.06),0 0 18px rgba(103,146,210,.2),0 10px 16px -8px rgba(0,0,0,.95);transform:translateY(-2px) scale(1.04)}
#musicdeck.hm-deck .hm-dk-bs .seg.pop .face{animation:hmPillPop .5s cubic-bezier(.2,.9,.3,1.3)}
@keyframes hmPillPop{0%{transform:translateY(0) scale(.95)}55%{transform:translateY(-4px) scale(1.09)}100%{transform:translateY(-2px) scale(1.04)}}
#musicdeck.hm-deck .hm-dk-bs button.on::before{display:none}
#musicdeck.hm-deck .hm-dk-bs button,#musicdeck.hm-deck .hm-dk-bs button:hover:not(.on),#musicdeck.hm-deck .hm-dk-bs button.on{transition:color .3s,transform .35s cubic-bezier(.2,.9,.3,1.2)}
#musicdeck.hm-deck .hm-dk-bs button.on{transform:translateY(-2px)}
/* PLAYER, proper: title centred with its number under it, a centred round transport (big play in the same dream glass), no clock,
   a clean progress line */
#musicdeck.hm-deck #mpmeta{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding-top:2px}
#musicdeck.hm-deck #mpmeta .copy{width:100%}
#musicdeck.hm-deck #mptitle{font-size:19px;text-align:center}
#musicdeck.hm-deck #mpcount{font-size:7.5px;letter-spacing:.3em;color:rgba(233,228,214,.4)}
#musicdeck.hm-deck #mpcontrols{justify-content:center;gap:18px;margin-top:12px}
#musicdeck.hm-deck #mptime{display:none}
#musicdeck.hm-deck #mpcontrols button{width:34px;height:34px;border:1px solid rgba(233,228,214,.14);border-radius:50%;background:rgba(255,255,255,.025);color:rgba(233,228,214,.75);font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;transition:border-color .25s,color .25s,background .25s,transform .2s}
#musicdeck.hm-deck #mpcontrols button:hover{border-color:rgba(236,208,138,.5);color:#ecd08a;transform:translateY(-1px)}
#musicdeck.hm-deck #mpplay{width:48px!important;height:48px!important;font-size:15px!important;color:#eef2fb!important;border:1px solid rgba(103,146,210,.5)!important;border-left-color:rgba(103,146,210,.85)!important;background:radial-gradient(circle at 26% 50%,rgba(103,146,210,.32),transparent 62%),linear-gradient(145deg,rgba(20,26,40,.97),rgba(7,9,15,.94))!important;box-shadow:inset 0 1px rgba(255,255,255,.06),0 0 18px rgba(103,146,210,.22),0 10px 16px -8px rgba(0,0,0,.9)}
#musicdeck.hm-deck #mpplay:hover{box-shadow:inset 0 1px rgba(255,255,255,.08),0 0 24px rgba(103,146,210,.35),0 10px 16px -8px rgba(0,0,0,.9)}
#musicdeck.hm-deck #mpcontrols button:focus{outline:none}
#musicdeck.hm-deck #mpcontrols button:focus-visible{outline:1px solid rgba(236,208,138,.6);outline-offset:3px}
#musicdeck.hm-deck #mpprogress{margin-top:14px;margin-bottom:2px;height:2px;border-radius:2px}

/* the deck's last row: ENTER DREAM (left) + the PRO · LOGS · ART knob (right), inside the panel instead of floating in corners */
#musicdeck.hm-deck{bottom:22px!important}
#musicdeck.hm-deck .hm-dk-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:12px;padding-top:20px;border-top:1px solid rgba(255,255,255,.07)}
#musicdeck.hm-deck .hm-dk-foot #dreambtn{position:relative!important;left:auto!important;bottom:auto!important;top:auto!important;flex:0 0 auto;width:118px!important;min-height:44px;margin:0 0 6px;padding:0 10px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;z-index:auto;opacity:1!important;pointer-events:auto!important}
#musicdeck.hm-deck .hm-dk-foot #dreambtn .dream-kicker{font-size:6px}
#musicdeck.hm-deck .hm-dk-foot #dreambtn .dream-label{justify-self:start;font-size:8px}
#musicdeck.hm-deck .hm-dk-foot .mode-knob{position:relative!important;right:auto!important;bottom:auto!important;top:auto!important;left:auto!important;flex:0 0 auto;transform:scale(.84)!important;transform-origin:right bottom!important;margin:0 -6px 0 0;opacity:1;filter:drop-shadow(0 7px 9px rgba(0,0,0,.48))!important}
body.hm-log-open #musicdeck.hm-deck .mode-knob{opacity:1;filter:none!important}

/* ENTER DREAM back in its own corner (no longer moved into the panel) */
#musicdeck.hm-deck .hm-dk-foot #dreambtn{display:none}
/* the panel's dream door: crescent + countdown, in the dream's navy glass */
#musicdeck.hm-deck .hm-dream-cta{display:flex;align-items:center;gap:10px;flex:0 0 auto;width:132px;min-height:44px;margin:0 0 6px;padding:0 12px;border:1px solid rgba(233,228,214,.1);border-left-color:rgba(103,146,210,.5);border-radius:11px;background:radial-gradient(circle at 22px 50%,rgba(103,146,210,.16),transparent 46px),linear-gradient(145deg,rgba(12,15,22,.92),rgba(5,6,10,.78));color:rgba(233,228,214,.8);cursor:pointer;text-align:left;transition:border-color .28s,background .28s,box-shadow .28s}
#musicdeck.hm-deck .hm-dream-cta .moon{flex:0 0 auto;width:16px;height:16px;fill:rgba(160,190,235,.18);stroke:rgba(160,190,235,.85);stroke-width:1.2;filter:drop-shadow(0 0 6px rgba(103,146,210,.55));animation:hmMoon 4.5s ease-in-out infinite}
@keyframes hmMoon{0%,100%{opacity:.75;transform:rotate(-6deg)}50%{opacity:1;transform:rotate(4deg)}}
#musicdeck.hm-deck .hm-dream-cta .tx{display:flex;flex-direction:column;gap:5px;min-width:0}
#musicdeck.hm-deck .hm-dream-cta .k{font:400 6px/1 'JetBrains Mono',monospace;letter-spacing:.3em;color:rgba(143,158,180,.6)}
#musicdeck.hm-deck .hm-dream-cta .t{font:400 8.5px/1 'JetBrains Mono',monospace;letter-spacing:.14em;color:#e3e8f3;white-space:nowrap;font-variant-numeric:tabular-nums}
#musicdeck.hm-deck .hm-dream-cta:hover{border-color:rgba(103,146,210,.6);box-shadow:0 0 22px rgba(103,146,210,.12)}
#musicdeck.hm-deck .hm-dream-cta.is-near .t{color:#a9c4ee;animation:hmNear .9s ease-in-out infinite}
@keyframes hmNear{0%,100%{opacity:.55}50%{opacity:1}}
#musicdeck.hm-deck .hm-dream-cta.is-on{border-color:rgba(103,146,210,.7);box-shadow:0 0 24px rgba(103,146,210,.2)}
/* the player, compact again: title left with its number right, small round transport (just the buttons changed), no clock */
#musicdeck.hm-deck #mpmeta{display:grid;grid-template-columns:1fr auto;align-items:end;gap:10px;text-align:left;padding-top:0}
#musicdeck.hm-deck #mptitle{font-size:16px;text-align:left}
#musicdeck.hm-deck #mpcount{font-size:7.5px;letter-spacing:.2em}
#musicdeck.hm-deck #mpcontrols{justify-content:center;gap:12px;margin-top:8px}
#musicdeck.hm-deck #mpcontrols button{width:26px;height:26px;font-size:12px}
#musicdeck.hm-deck #mpplay{width:34px!important;height:34px!important;font-size:12px!important}
#musicdeck.hm-deck #mpprogress{margin-top:9px;margin-bottom:0}
#musicdeck.hm-deck .hm-dk-foot{margin-top:10px;padding-top:16px}

/* panel a touch wider; the last row: the dream door fills the row's full height, the knob at its full size with all three legends */
#musicdeck.hm-deck{width:320px}
#musicdeck.hm-deck .hm-dk-foot{align-items:stretch;min-height:96px;padding-top:24px}
#musicdeck.hm-deck .hm-dk-foot .mode-knob{transform:none!important;margin:0;align-self:flex-end}
#musicdeck.hm-deck .hm-dream-cta{flex:1 1 auto;width:auto;min-height:0;margin:0;gap:12px;padding:0 14px}
#musicdeck.hm-deck .hm-dream-cta .moon{width:20px;height:20px}
#musicdeck.hm-deck .hm-dream-cta .tx{gap:7px}
#musicdeck.hm-deck .hm-dream-cta .k{font-size:7px}
#musicdeck.hm-deck .hm-dream-cta .big{display:flex;align-items:center;gap:8px}
#musicdeck.hm-deck .hm-dream-cta .t{font:300 24px/1 'JetBrains Mono',monospace;letter-spacing:.04em;color:#ecd08a;text-shadow:0 0 12px rgba(236,208,138,.35)}
#musicdeck.hm-deck .hm-dream-cta .t small{margin-left:2px;font-size:11px;color:rgba(236,208,138,.7)}
#musicdeck.hm-deck .hm-dream-cta .dot{display:block;width:6px;height:6px;border-radius:50%;background:#ecd08a;box-shadow:0 0 8px #ecd08a;animation:hmTick 1s steps(1) infinite}
@keyframes hmTick{0%{opacity:1}50%{opacity:.12}}
#musicdeck.hm-deck .hm-dream-cta:not(.is-count) .dot{display:none}
#musicdeck.hm-deck .hm-dream-cta.is-near .t,#musicdeck.hm-deck .hm-dream-cta.is-on .t,#musicdeck.hm-deck .hm-dream-cta.is-day .t{font-size:12px;letter-spacing:.12em;color:#c6d6f2;text-shadow:0 0 10px rgba(103,146,210,.35)}
#musicdeck.hm-deck .hm-dream-cta.is-near .t{animation:hmNear .9s ease-in-out infinite}
#musicdeck.hm-deck .hm-dream-cta.is-day .t{color:rgba(233,228,214,.6);text-shadow:none}
/* the site's own palette: the brain-state pill and the play button take the dream-glass gradient in warm gold; blue stays only on the dream door */
#musicdeck.hm-deck .hm-dk-bs .seg .face{border:1px solid rgba(201,162,74,.42);border-left-color:rgba(236,208,138,.85);background:radial-gradient(circle at 16% 50%,rgba(236,208,138,.26),transparent 60%),linear-gradient(145deg,rgba(40,33,20,.97),rgba(12,11,8,.94));box-shadow:inset 0 1px rgba(255,243,207,.07),0 0 18px rgba(236,208,138,.16),0 10px 16px -8px rgba(0,0,0,.95)}
#musicdeck.hm-deck .hm-dk-bs button.on{color:#fff3cf;text-shadow:0 0 10px rgba(236,208,138,.35)}
#musicdeck.hm-deck #mpplay{color:#fff3cf!important;border:1px solid rgba(201,162,74,.5)!important;border-left-color:rgba(236,208,138,.85)!important;background:radial-gradient(circle at 26% 50%,rgba(236,208,138,.28),transparent 62%),linear-gradient(145deg,rgba(40,33,20,.97),rgba(12,11,8,.94))!important;box-shadow:inset 0 1px rgba(255,243,207,.07),0 0 16px rgba(236,208,138,.16),0 10px 16px -8px rgba(0,0,0,.9)}
#musicdeck.hm-deck #mpplay:hover{box-shadow:inset 0 1px rgba(255,243,207,.09),0 0 22px rgba(236,208,138,.3),0 10px 16px -8px rgba(0,0,0,.9)}

/* SQUEEZE · everything in roughly the old compact panel's size (≈300 × 220) */
#musicdeck.hm-deck{width:300px}
#musicdeck.hm-deck #mpbody{padding:10px 12px 9px}
/* MUSIC / FX */
#musicdeck.hm-deck .hm-dk-mix{margin:0 0 7px;padding:0 0 8px}
#musicdeck.hm-deck .hm-dk-mix .hm-mx-row .n{font-size:10px;letter-spacing:.24em}
#musicdeck.hm-deck .hm-ch-sw .sw{width:36px;height:19px}
#musicdeck.hm-deck .hm-ch-sw .sw i{left:2px;top:2px;width:13px;height:13px}
#musicdeck.hm-deck .hm-ch-sw.on .sw i{transform:translateX(17px)}
#musicdeck.hm-deck .hm-dk-mix[data-show] .hm-fader{margin-top:9px}
/* brain state */
#musicdeck.hm-deck .hm-dk-bs{padding:0 0 8px;margin:0 0 7px}
#musicdeck.hm-deck .hm-dk-bs .hm-k{font-size:7px}
#musicdeck.hm-deck .hm-dk-bs .hz{font-size:7.5px}
#musicdeck.hm-deck .hm-dk-bs .seg{margin-top:7px;padding:3px;border-radius:10px}
#musicdeck.hm-deck .hm-dk-bs .seg .ind{top:3px;bottom:3px;left:3px;width:calc((100% - 6px) / 3)}
#musicdeck.hm-deck .hm-dk-bs button,#musicdeck.hm-deck .hm-dk-bs button:hover:not(.on),#musicdeck.hm-deck .hm-dk-bs button.on{padding:7px 2px 6px;font-size:9px}
/* the player in one row: name (+ number) left, a small transport right, the progress line under */
#musicdeck.hm-deck .hm-player{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px}
#musicdeck.hm-deck .hm-player #mpmeta{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
#musicdeck.hm-deck .hm-player #mptitle{font-size:14px;max-width:100%}
#musicdeck.hm-deck .hm-player #mpcount{font-size:6.5px}
#musicdeck.hm-deck .hm-player #mpcontrols{margin:0;gap:6px}
#musicdeck.hm-deck .hm-player #mpcontrols button{width:22px;height:22px;font-size:10px}
#musicdeck.hm-deck .hm-player #mpplay{width:28px!important;height:28px!important;font-size:10px!important}
#musicdeck.hm-deck #mpprogress{margin-top:7px}
/* dream + knob row: the knob at 80% inside a wrapper sized to it, so PRO · LOGS · ART all stay in view */
#musicdeck.hm-deck .hm-dk-foot{min-height:0;margin-top:8px;padding-top:15px;align-items:flex-end;gap:10px}
#musicdeck.hm-deck .hm-kw{position:relative;flex:0 0 102px;width:102px;height:57px}
#musicdeck.hm-deck .hm-kw .mode-knob{position:absolute!important;right:0!important;bottom:0!important;left:auto!important;top:auto!important;transform:scale(.8)!important;transform-origin:right bottom!important;margin:0!important}
#musicdeck.hm-deck .hm-dream-cta{height:52px;align-self:flex-end;padding:0 11px;gap:9px}
#musicdeck.hm-deck .hm-dream-cta .moon{width:16px;height:16px}
#musicdeck.hm-deck .hm-dream-cta .tx{gap:5px}
#musicdeck.hm-deck .hm-dream-cta .k{font-size:6px}
#musicdeck.hm-deck .hm-dream-cta .t{font-size:19px}
#musicdeck.hm-deck .hm-dream-cta .t small{font-size:9px}
#musicdeck.hm-deck .hm-dream-cta .dot{width:5px;height:5px}
#musicdeck.hm-deck .hm-dream-cta.is-near .t,#musicdeck.hm-deck .hm-dream-cta.is-on .t,#musicdeck.hm-deck .hm-dream-cta.is-day .t{font-size:10px}
/* SQUEEZE 2 · down to the old panel's height */
#musicdeck.hm-deck #mpbody{padding:9px 12px 8px}
#musicdeck.hm-deck .hm-dk-mix{margin:0 0 5px;padding:0 0 6px}
#musicdeck.hm-deck .hm-dk-bs{padding:0 0 6px;margin:0 0 5px}
#musicdeck.hm-deck .hm-dk-bs .seg{margin-top:5px}
#musicdeck.hm-deck .hm-dk-bs button,#musicdeck.hm-deck .hm-dk-bs button:hover:not(.on),#musicdeck.hm-deck .hm-dk-bs button.on{padding:6px 2px 5px}
#musicdeck.hm-deck #mpprogress{margin-top:6px}
#musicdeck.hm-deck .hm-dk-foot{margin-top:6px;padding-top:12px}
#musicdeck.hm-deck .hm-kw{flex:0 0 92px;width:92px;height:51px}
#musicdeck.hm-deck .hm-kw .mode-knob{transform:scale(.72)!important}
#musicdeck.hm-deck .hm-dream-cta{height:46px}
#musicdeck.hm-deck .hm-dream-cta .t{font-size:17px}
#musicdeck.hm-deck .hm-dk-foot{padding-top:15px}
/* the knob gets the room back (90%), the dream box narrows to what it needs */
#musicdeck.hm-deck .hm-kw{flex:0 0 112px;width:112px;height:63px}
#musicdeck.hm-deck .hm-kw .mode-knob{transform:scale(.9)!important}
#musicdeck.hm-deck .hm-dream-cta{flex:1 1 auto;max-width:124px;height:54px}
#musicdeck.hm-deck .hm-dream-cta .t{font-size:19px}
#musicdeck.hm-deck .hm-dk-foot{padding-top:17px;justify-content:space-between}
#musicdeck.hm-deck .hm-dk-foot{padding-top:23px}

/* ONE accent, copper-amber glass (a sibling of the gold, not a stranger): only on the chosen brain state and the dream door.
   Softer than the old blue so it never pulls the eye. The play button stays gold; the countdown digits stay gold. */
#musicdeck.hm-deck .hm-dk-bs .seg .face{border:1px solid rgba(214,150,86,.38);border-left-color:rgba(232,172,112,.72);background:radial-gradient(circle at 16% 50%,rgba(214,150,86,.18),transparent 60%),linear-gradient(145deg,rgba(36,25,17,.96),rgba(12,10,8,.94));box-shadow:inset 0 1px rgba(255,236,214,.06),0 0 14px rgba(214,150,86,.1),0 10px 16px -8px rgba(0,0,0,.95)}
#musicdeck.hm-deck .hm-dk-bs button.on{color:#f6e4cf;text-shadow:0 0 10px rgba(214,150,86,.3)}
#musicdeck.hm-deck .hm-dream-cta{border:1px solid rgba(233,228,214,.09);border-left-color:rgba(214,150,86,.55);background:radial-gradient(circle at 22px 50%,rgba(214,150,86,.13),transparent 46px),linear-gradient(145deg,rgba(26,19,14,.92),rgba(9,8,7,.8))}
#musicdeck.hm-deck .hm-dream-cta:hover{border-color:rgba(214,150,86,.55);box-shadow:0 0 18px rgba(214,150,86,.1)}
#musicdeck.hm-deck .hm-dream-cta .moon{fill:rgba(214,150,86,.14);stroke:rgba(236,192,146,.85);filter:drop-shadow(0 0 5px rgba(214,150,86,.4))}
#musicdeck.hm-deck .hm-dream-cta .k{color:rgba(196,170,140,.6)}
#musicdeck.hm-deck .hm-dream-cta.is-near .t,#musicdeck.hm-deck .hm-dream-cta.is-on .t{color:#f0caa2;text-shadow:0 0 10px rgba(214,150,86,.35)}
#musicdeck.hm-deck .hm-dream-cta.is-on{border-color:rgba(214,150,86,.6);box-shadow:0 0 18px rgba(214,150,86,.14)}
/* the dream door uses the row's full height (the space beside the knob's LOGS legend) */
#musicdeck.hm-deck .hm-dream-cta{height:84px;max-width:none;flex:1 1 auto;gap:12px;padding:0 14px}
#musicdeck.hm-deck .hm-dream-cta .moon{width:22px;height:22px}
#musicdeck.hm-deck .hm-dream-cta .tx{gap:8px}
#musicdeck.hm-deck .hm-dream-cta .k{font-size:7px}
#musicdeck.hm-deck .hm-dream-cta .t{font-size:26px}
#musicdeck.hm-deck .hm-dream-cta .t small{font-size:11px}
#musicdeck.hm-deck .hm-dream-cta .dot{width:6px;height:6px}
#musicdeck.hm-deck .hm-dream-cta.is-near .t,#musicdeck.hm-deck .hm-dream-cta.is-on .t,#musicdeck.hm-deck .hm-dream-cta.is-day .t{font-size:12px}
/* keep the row at its old height: the knob's wrapper holds its LOGS legend inside, the dream door matches that full height */
#musicdeck.hm-deck .hm-dk-foot{padding-top:8px}
#musicdeck.hm-deck .hm-kw{height:84px}

/* hover on the dream door: the countdown gives way to ENTER DREAM →, the crescent brightens (not while already dreaming) */
#musicdeck.hm-deck .hm-dream-cta .go{display:none;font:400 10px/1.3 'JetBrains Mono',monospace;letter-spacing:.24em;color:#f6e4cf;text-shadow:0 0 10px rgba(214,150,86,.4);white-space:nowrap}
#musicdeck.hm-deck .hm-dream-cta:not(.is-on):hover .k,#musicdeck.hm-deck .hm-dream-cta:not(.is-on):hover .big{display:none}
#musicdeck.hm-deck .hm-dream-cta:not(.is-on):hover .go{display:block}
#musicdeck.hm-deck .hm-dream-cta:not(.is-on):hover .moon{stroke:#f6dcbf;filter:drop-shadow(0 0 8px rgba(214,150,86,.7));animation-play-state:paused}

/* the dream door never changes size, whatever it says (so the knob never moves); ENTER / DREAM → on two lines */
#musicdeck.hm-deck .hm-dream-cta{flex:0 0 121px;width:121px;max-width:121px;overflow:hidden}
#musicdeck.hm-deck .hm-dream-cta .tx{min-width:0;overflow:hidden}
#musicdeck.hm-deck .hm-dream-cta .go{white-space:normal;font-size:11px;line-height:1.55;letter-spacing:.26em}
#musicdeck.hm-deck .hm-dream-cta .go{white-space:nowrap;font-size:10px;letter-spacing:.16em;line-height:1.6}

/* DREAMING · the four corners step out to their own edges (SYS top-left, telemetry top-right, brain monitor + ENTER DREAM bottom-left,
   the control panel bottom-right) and come back on waking */
#tl,#pl,#dial{transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .6s ease}
#dreambtn{transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .6s ease,border-color .28s,background .28s,box-shadow .28s,color .28s}
body.hm-dreaming #tl,body.hm-dreaming #dial,body.hm-dreaming #dreambtn{transform:translateX(-130%)!important;opacity:0!important;pointer-events:none!important}
body.hm-dreaming #pl{transform:translateX(130%)!important;opacity:0!important;pointer-events:none!important}
body.hm-dreaming #musicdeck{transform:translateX(110%)!important;opacity:0!important;pointer-events:none!important}

/* OPTIMIZATION 1 · rendering. The panels sit over the live 3D mind, so a backdrop blur there is re-blurred every frame: removed
   (backgrounds a touch more solid, same look). Receding is opacity only (no blur filters). The crescent drops its animated glow filter. */
#musicdeck,#dial,#dreambtn,#pl,#tl,#hint,#termhint{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
#musicdeck.hm-deck{background:linear-gradient(135deg,rgba(13,14,18,.95),rgba(6,7,9,.92))!important}
.ui#dial{background:radial-gradient(circle at 24px 24px,rgba(201,162,74,.12),transparent 36px),linear-gradient(145deg,rgba(11,12,16,.93),rgba(5,6,8,.88))!important}
#dreambtn{background:radial-gradient(circle at 28px 50%,rgba(103,146,210,.12),transparent 44px),linear-gradient(145deg,rgba(10,12,18,.94),rgba(4,5,8,.86))!important}
body.hm-log-open #musicdeck.hm-deck,body.hm-log-open #dial,body.hm-log-open .mode-knob,.hm-car-head.is-quiet{filter:none!important}
body.hm-log-open #musicdeck.hm-deck,body.hm-log-open #dial{opacity:.3}
.hm-car-head.is-quiet{opacity:.28}
#musicdeck.hm-deck .hm-dream-cta .moon,#musicdeck.hm-deck .hm-dream-cta:not(.is-on):hover .moon{filter:none}
#pl{background:linear-gradient(145deg,rgba(10,11,15,.9),rgba(4,5,7,.8))!important}

/* OPTIMIZATION 1 · the floating text: each fragment's layout is its own (a word change never re-lays the page); neuron thoughts ride
   on transforms from a fixed origin; the glitch flicker is opacity, not a repainting clip shape */
#frags .frag{contain:layout style}
#frags .frag.think{left:0!important;top:0!important;will-change:transform}
#frags .frag.glitch{clip-path:none!important;opacity:.45!important}

/* ═══ PHONE (≤760px) · the same page, laid out for a phone ═══ */
@media (max-width:760px){
  /* the control deck = a slide-in sheet on the right edge (starts tucked; its gold tab shows); undo the old phone mini-player rules */
  #musicdeck.hm-deck{top:auto!important;bottom:calc(14px + env(safe-area-inset-bottom,0px))!important;right:0!important;left:auto!important;width:min(300px,calc(100vw - 20px))!important;height:auto!important;min-height:0!important;border-radius:14px 0 0 14px!important;transform:translateX(calc(100% - 34px))!important;opacity:1!important}
  #musicdeck.hm-deck.open{transform:translateX(0)!important}
  #musicdeck.hm-deck #mptab{width:34px!important}
  #musicdeck.hm-deck #mpbody{position:static!important;height:auto!important;margin-left:34px!important;padding:10px 12px 9px!important}
  #musicdeck.hm-deck #mpmeta{height:auto!important}
  #musicdeck.hm-deck #mpmeta small{display:none!important}
  #musicdeck.hm-deck #mptitle{max-width:100%!important}
  #musicdeck.hm-deck #mpcontrols{position:static!important;transform:none!important;margin:0!important}
  #musicdeck.hm-deck #mpprogress{display:block!important}
  body.hm-dreaming #musicdeck.hm-deck{transform:translateX(110%)!important;opacity:0!important}
  /* the day */
  .hm-day-grid{width:100vw;height:calc(100vh - 120px);height:calc(100dvh - 120px);margin-top:-10px}
  .hm-car-ctl{width:calc(100% - 24px)!important;grid-template-columns:36px minmax(0,1fr) 36px 52px;gap:10px}
  .hm-car-ctl .a{width:36px;height:36px}
  .hm-strip .lb span{font-size:7px}
  .hm-back-mind{top:auto;bottom:calc(16px + env(safe-area-inset-bottom,0px));left:12px;padding:9px 12px;font-size:8.5px;letter-spacing:.22em}
  body.hm-log-open .hm-nav{display:none}
  .hm-card{border-radius:16px}
}
/* the switched-off stations' leftovers (their phone nav, rail, cues, "view all", gallery wire/scroll): never on the logs page */
#mobile-hyper-cue,#ns-viewall,#ns-mobile-rail,#ns-mobile-nav,#ns-foot,#galscroll,#galwire{display:none!important}

/* ═══ PHONE · MOBILE WORK 2: everything the desktop has, sized for a phone ═══ */
@media (max-width:760px){
  body #ticker,body #tl,body #pl,body #frags,body #dial{display:block!important}
  body #dreambtn{display:grid!important}
  /* top: ticker, SYS top-left, telemetry top-right (scaled) */
  #ticker{height:22px!important}
  #ticker .tr{line-height:22px!important;font-size:8.5px!important}
  #tl{top:30px!important;left:12px!important;font-size:7.5px!important;line-height:1.75!important}
  #pl{top:30px!important;right:10px!important;left:auto!important;transform:scale(.66)!important;transform-origin:top right!important}
  /* the thoughts among the neurons, a little smaller */
  #frags .frag{font-size:9.5px;max-width:40vw}
  #frags .frag.math{font-size:10.5px}
  #frags .frag.gita{font-size:12.5px}
  #frags .frag.bio{font-size:8px}
  #frags .frag.hero{font-size:clamp(24px,8vw,38px)}
  #frags .frag.think{font-size:9.5px}
  /* bottom-left: the brain monitor with ENTER DREAM under it, slim enough to sit beside the panel's tab */
  .ui#dial{top:auto!important;bottom:calc(64px + env(safe-area-inset-bottom,0px))!important;left:10px!important;width:min(176px,46vw)!important;padding:8px!important}
  #dial .eeg{height:38px;margin-top:6px}
  #dial .dial-orb{transform:scale(.8)}
  #dreambtn{top:auto!important;bottom:calc(14px + env(safe-area-inset-bottom,0px))!important;left:10px!important;width:min(176px,46vw)!important;min-height:42px!important;padding:0 10px!important}
}

/* ═══ PHONE · MOBILE WORK 3: no brain monitor / ENTER DREAM corner (both live in the panel); the panel = a wide sheet at the bottom
   centre with a handle on top (tap to slide it up / tuck it down); thoughts kept out of the top strip (SYS + telemetry live there) ═══ */
@media (max-width:760px){
  body #dial,body #dreambtn{display:none!important}
  #frags .frag[style*="top: 8vh"],#frags .frag[style*="top: 12vh"],#frags .frag[style*="top: 18vh"],#frags .frag[style*="top: 20vh"]{display:none!important}
  #musicdeck.hm-deck{left:50%!important;right:auto!important;bottom:calc(8px + env(safe-area-inset-bottom,0px))!important;width:calc(100vw - 16px)!important;max-width:440px!important;border-radius:14px!important;transform:translate(-50%,calc(100% - 26px))!important}
  #musicdeck.hm-deck.open{transform:translate(-50%,0)!important}
  body.hm-dreaming #musicdeck.hm-deck{transform:translate(-50%,120%)!important;opacity:0!important}
  #musicdeck.hm-deck #mptab{inset:0 0 auto 0!important;width:100%!important;height:26px!important;border-right:0!important;border-bottom:1px solid rgba(201,162,74,.18)!important;border-radius:14px 14px 0 0!important}
  #musicdeck.hm-deck #mpbody{margin:26px 0 0!important;padding:9px 12px 10px!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:14px;grid-template-areas:"mix player" "bs bs" "prog prog" "foot foot"}
  #musicdeck.hm-deck .hm-dk-mix{grid-area:mix;margin:0!important;padding:0 0 6px!important;border-bottom:0!important;align-self:center}
  #musicdeck.hm-deck .hm-mix-heads{gap:8px}
  #musicdeck.hm-deck .hm-dk-mix .hm-mx-row .n{font-size:9px;letter-spacing:.16em}
  #musicdeck.hm-deck .hm-player{grid-area:player;align-self:center}
  #musicdeck.hm-deck .hm-player #mptitle{font-size:13px}
  #musicdeck.hm-deck .hm-dk-bs{grid-area:bs;margin:6px 0 4px!important;padding:8px 0 0!important;border-top:1px solid rgba(255,255,255,.07);border-bottom:0!important}
  #musicdeck.hm-deck #mpprogress{grid-area:prog}
  #musicdeck.hm-deck .hm-dk-foot{grid-area:foot;margin-top:8px!important;padding-top:8px!important}
  #musicdeck.hm-deck .hm-dream-cta{flex:1 1 auto!important;width:auto!important;max-width:none!important}
}
@media (max-width:760px){
  #musicdeck.hm-deck #mpprogress{position:static!important;width:auto!important;left:auto!important;right:auto!important;bottom:auto!important;margin:6px 0 0!important}
  #musicdeck.hm-deck .hm-kw{flex:0 0 92px!important;width:92px!important;height:66px!important}
  #musicdeck.hm-deck .hm-kw .mode-knob{transform:scale(.72)!important}
  #musicdeck.hm-deck .hm-dream-cta{height:56px!important;align-self:flex-end}
  #musicdeck.hm-deck .hm-dream-cta .t{font-size:20px}
  #musicdeck.hm-deck .hm-dk-foot{padding-top:6px!important;margin-top:6px!important}
}
/* PHONE · MOBILE WORK 4: only as wide as the content needs (no stretch) */
@media (max-width:760px){
  #musicdeck.hm-deck{width:min(340px,calc(100vw - 16px))!important;max-width:340px!important}
  #musicdeck.hm-deck #mpbody{grid-template-columns:136px minmax(0,1fr)!important;column-gap:12px!important}
  #musicdeck.hm-deck .hm-mix-heads{gap:6px}
  #musicdeck.hm-deck .hm-dk-mix .hm-mx-row .n{font-size:8.5px;letter-spacing:.14em}
  #musicdeck.hm-deck .hm-ch-sw .sw{width:30px;height:16px}
  #musicdeck.hm-deck .hm-ch-sw .sw i{left:2px;top:2px;width:10px;height:10px}
  #musicdeck.hm-deck .hm-ch-sw.on .sw i{transform:translateX(14px)}
  #musicdeck.hm-deck .hm-player #mpcontrols{gap:5px}
  #musicdeck.hm-deck .hm-player #mpcontrols button{width:22px;height:22px}
  #musicdeck.hm-deck .hm-player #mpplay{width:28px!important;height:28px!important}
  #musicdeck.hm-deck .hm-dk-foot{justify-content:center!important;gap:22px!important}
  #musicdeck.hm-deck .hm-dream-cta{flex:0 0 132px!important;width:132px!important;max-width:132px!important}
}
/* ═══ PHONE · MOBILE WORK 7: a calmer panel. Floor 1 = BRAIN STATE, horizontal and thumb-sized; floor 2 = MUSIC over FX, the play
   controls (no song name on phones), the PRO · LOGS · ART knob. The DREAM countdown leaves the panel: one line under SYS, top-left,
   ending level with the telemetry box. Desktop untouched. ═══ */
@media (max-width:760px){
  #musicdeck.hm-deck #mpbody{grid-template-columns:auto minmax(0,1fr) auto!important;column-gap:10px!important;row-gap:0!important;grid-template-areas:"bs bs bs" "prog prog prog" "mix player foot"!important;padding:10px 14px 10px!important}
  #musicdeck.hm-deck #mpprogress{margin:10px 0 8px!important}
  /* brain state */
  #musicdeck.hm-deck .hm-dk-bs{grid-area:bs;margin:0!important;padding:0!important;border:0!important}
  #musicdeck.hm-deck .hm-dk-bs .hm-k-row{margin:0 0 7px}
  #musicdeck.hm-deck .hm-dk-bs .hm-k{font-size:7.5px;letter-spacing:.22em}
  #musicdeck.hm-deck .hm-dk-bs .hz{font-size:7.5px}
  #musicdeck.hm-deck .hm-dk-bs .seg{margin:0;padding:3px;border-radius:11px}
  #musicdeck.hm-deck .hm-dk-bs button,#musicdeck.hm-deck .hm-dk-bs button:hover:not(.on),#musicdeck.hm-deck .hm-dk-bs button.on{padding:12px 2px 11px;font-size:10px;letter-spacing:.26em;text-indent:.26em}
  /* floor 2, left: MUSIC over FX */
  #musicdeck.hm-deck .hm-dk-mix{grid-area:mix;align-self:center;margin:0!important;padding:0!important;border:0!important}
  #musicdeck.hm-deck .hm-mix-heads{display:flex!important;flex-direction:column;gap:10px!important}
  #musicdeck.hm-deck .hm-dk-mix .hm-mx-row .t{gap:10px}
  /* floor 2, middle: just the controls, a little bigger for a thumb */
  #musicdeck.hm-deck #mpmeta{display:none!important}
  #musicdeck.hm-deck .hm-player{display:flex!important;justify-content:center;align-self:center}
  #musicdeck.hm-deck .hm-player #mpcontrols{gap:8px}
  #musicdeck.hm-deck .hm-player #mpcontrols button{width:30px;height:30px}
  #musicdeck.hm-deck .hm-player #mpplay{width:38px!important;height:38px!important}
  /* floor 2, right: the knob alone */
  #musicdeck.hm-deck .hm-dk-foot{grid-area:foot;margin:0!important;padding:0!important;border:0!important;min-height:0!important;gap:0!important;align-self:end}
  #musicdeck.hm-deck .hm-kw{flex:0 0 92px!important;width:92px!important;height:64px!important}
  /* phones: MUSIC / FX are plain switches; the volume fader (it pushed the switches around) never opens here */
  #musicdeck.hm-deck .hm-fader{display:none!important}
  #musicdeck.hm-deck .hm-dk-mix .hm-mx-row .n,#musicdeck.hm-deck .hm-dk-mix[data-show] .hm-mx-row .n{cursor:default;color:#ecd08a!important;text-shadow:none!important}
  /* SYS on phones: no coordinates, no log line (room for the dream door) */
  #tl .tl-geo,#tl .tl-log{display:none}
  /* DREAM, top-left under SYS: a small blue glass box exactly as wide as the SYS lines above it; the moon, then DREAM IN over
     the countdown. Its bottom edge is level with the telemetry box; a slow blue breath on its edge; tap = enter the dream
     (the tap target is bigger than what you see). */
  /* mobile-work-26: blended into the HUD (his note: too blue, it stood apart): the telemetry box's own dark glass and thin
     ivory hairline, no blue wash, no breathing glow; only the moon keeps a faint cool tint */
  #dreamline{position:fixed;z-index:30;top:88px;left:12px;width:118px;height:43px;display:flex;align-items:center;gap:10px;margin:0;padding:0 10px 0 11px;border:1px solid rgba(233,228,214,.12);border-radius:3px;background:rgba(8,9,12,.55);box-shadow:none;color:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .5s,border-color .25s,transform .2s}
  #dreamline::before{content:"";position:absolute;inset:-6px -8px -8px -6px}
  #dreamline::after{display:none}
  #dreamline:active{transform:scale(.97);border-color:rgba(233,228,214,.28)}
  #dreamline .moon{flex:0 0 auto;width:13px;height:13px;fill:none;stroke:rgba(214,222,236,.7);stroke-width:1.2;animation:hmMoon 4.5s ease-in-out infinite}
  #dreamline .tx{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
  #dreamline .k{font:400 6.5px/1 'JetBrains Mono',monospace;letter-spacing:.22em;color:rgba(233,228,214,.45);white-space:nowrap}
  #dreamline .big{display:flex;align-items:center;gap:6px}
  #dreamline .dot{display:block;width:4px;height:4px;border-radius:50%;background:#ecd08a;box-shadow:0 0 6px #ecd08a;animation:hmTick 1s steps(1) infinite}
  #dreamline:not(.is-count) .dot{display:none}
  #dreamline .t{font:400 15px/1 'JetBrains Mono',monospace;letter-spacing:.04em;color:#ecd08a;white-space:nowrap;font-variant-numeric:tabular-nums;text-shadow:none}
  #dreamline .t small{margin-left:1px;font-size:7.5px;color:rgba(236,208,138,.7)}
  #dreamline:not(.is-count) .t{font-size:7.5px;letter-spacing:.16em;color:rgba(233,228,214,.7);text-shadow:none}
  #dreamline.is-near .t{animation:hmNear .9s ease-in-out infinite}
  #dreamline .go{display:none}
  /* the floating thoughts: no width cap on phones (the box = the words, so the fit check below measures them truly) */
  #frags .frag{max-width:none}
  body.hm-dreaming #dreamline,body.hm-log-open #dreamline,body.boot-active #dreamline{opacity:0;pointer-events:none}
}
@keyframes dlBreath{0%,100%{opacity:0}50%{opacity:1}}

/* ═══ PHONE · the DREAM black hole (mobile-work-12). A small circle just above the TUCKED panel; it goes away while the panel is
   open, a day is open, or during the boot. While dreaming it stays: on a phone, tapping it is the only way out of the dream.
   A small black-hole planet drawn in depth on a canvas (syslog-hyper.js): dark sphere, tilted ring of gold and moonlit streaks
   passing behind and in front of it, photon ring. Inflow outside the dream, outflow inside it. ═══ */
@media (max-width:760px){
  #dreamportal{position:fixed;z-index:30;left:50%;bottom:calc(50px + env(safe-area-inset-bottom,0px));margin:0;padding:0;transform:translateX(-50%);display:block;border:0;background:none;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .45s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
  #musicdeck.hm-deck.open + #dreamportal,body.hm-log-open #dreamportal,body.boot-active #dreamportal{opacity:0;pointer-events:none;transform:translate(-50%,16px)}
  body.hm-dreaming #musicdeck.hm-deck + #dreamportal{opacity:1;pointer-events:auto;transform:translateX(-50%)}
  #dreamportal .hole{position:relative;display:block;width:112px;height:72px;transition:transform .25s cubic-bezier(.2,.9,.3,1.2)}
  #dreamportal .hole canvas{display:block;width:112px;height:72px}
  #dreamportal:active .hole{transform:scale(.88)}
}

/* PHONE · the dream's safety exit: a small back arrow top-left, under the ticker, only while dreaming (mobile-work-24) */
#dreamback{display:none}
@media (max-width:760px){
  #dreamback{position:fixed;z-index:40;top:calc(32px + env(safe-area-inset-top,0px));left:12px;width:38px;height:38px;display:grid;place-items:center;margin:0;padding:0;border:1px solid rgba(201,162,74,.45);border-radius:50%;background:rgba(5,6,10,.6);color:#ecd08a;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .5s ease;-webkit-tap-highlight-color:transparent}
  #dreamback::before{content:"";position:absolute;inset:-8px}
  #dreamback svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
  #dreamback:active{transform:scale(.92)}
  body.hm-dreaming #dreamback{opacity:1;pointer-events:auto}
}

/* the day's ← → hint: buttons now, so reset them to look exactly as before on desktop */
.hm-swipe .ar{margin:0;padding:0;border:0;background:none;color:inherit;font:inherit}
/* PHONE · the day view (mobile-work-25): BACK TO MIND at the top-left (the panel handle covered it at the bottom); the ← →
   become round buttons like the calendar's arrows (tap one card back or on; swiping still works) */
@media (max-width:760px){
  .hm-back-mind{top:calc(30px + env(safe-area-inset-top,0px))!important;bottom:auto!important;left:12px!important;padding:8px 11px!important;font-size:8px!important}
  .hm-swipe{pointer-events:auto;height:auto;gap:20px;margin-top:10px}
  .hm-swipe .ar{position:relative;width:40px;height:40px;display:grid;place-items:center;border:1px solid rgba(201,162,74,.32);border-radius:50%;background:rgba(10,11,15,.55);opacity:1;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .25s,background .25s}
  .hm-swipe .ar::before{content:"";position:absolute;inset:-6px}
  .hm-swipe .ar:active{border-color:rgba(236,208,138,.7);background:rgba(236,208,138,.08)}
  .hm-swipe .ar svg{width:18px;height:8px}
}

/* OCT 21 · phones: the board is its own layer from the start (opening and closing never repaint it), a lighter shadow, no blue tap ring */
@media (max-width:760px){
  #musicdeck.hm-deck{will-change:transform;box-shadow:0 10px 26px rgba(0,0,0,.45)!important}
  #dreamportal{will-change:transform,opacity}
  #musicdeck #mptab:focus,#musicdeck #mptab:focus-visible,#musicdeck button:focus:not(:focus-visible){outline:none!important;box-shadow:none}
  #musicdeck #mptab{-webkit-tap-highlight-color:transparent}
}

/* OCT 21 · phones: a lighter board (flat surfaces; no glows, drop-shadows or blurred shadows to paint) */
@media (max-width:760px){
  #musicdeck.hm-deck{box-shadow:none!important;background:rgba(8,9,12,.9)!important}
  #musicdeck.hm-deck .mode-knob,#musicdeck.hm-deck .hm-kw .mode-knob{filter:none!important}
  #musicdeck.hm-deck .hm-dk-bs .seg{box-shadow:none!important}
  #musicdeck.hm-deck .hm-dk-bs .seg .face{box-shadow:none!important}
  #musicdeck.hm-deck #mpprogress i,#musicdeck.hm-deck .mpeq i{box-shadow:none!important}
  #musicdeck.hm-deck .hm-player #mpplay{box-shadow:none!important}
}