/* UniTox Garage — Blog button + slide-up post list (menus and pages) */
.ublog-btn,.ublog{--ub-ink:#f3eef7;--ub-muted:#b3a9bb;--ub-sec:#ff5fa8;--ub-head:var(--utx-head,"Barlow Condensed",system-ui,sans-serif);--ub-body:var(--utx-body,"Barlow",system-ui,sans-serif)}
.ublog-car{--ub-sec:#5fd0e6}.ublog-art{--ub-sec:#f5d547}.ublog-me{--ub-sec:#ff5fa8}

.ublog-btn{position:absolute;z-index:31;display:inline-flex;align-items:center;gap:8px;padding:13px 20px 12px;border:0;cursor:pointer;color:var(--ub-ink);isolation:isolate;
  background:url("../ui/bg_medium.webp") center/100% 100% no-repeat;filter:drop-shadow(0 6px 12px rgba(0,0,0,.45));
  font:700 16px/1 var(--ub-head);letter-spacing:.12em;text-transform:uppercase;text-shadow:0 1px 2px rgba(0,0,0,.6);white-space:nowrap;opacity:0;transition:opacity .4s}
.ublog-btn.on{opacity:1}
.ublog-btn.floating{position:fixed;left:max(16px,env(safe-area-inset-left));bottom:max(16px,env(safe-area-inset-bottom))}
.ublog-btn svg{width:18px;height:18px;flex:0 0 auto}
.ublog-btn::before{content:"";position:absolute;left:14%;right:12%;bottom:8%;height:40%;z-index:-1;pointer-events:none;opacity:0;transition:opacity .2s;background:center/100% 100% no-repeat}
.ublog-me.ublog-btn::before{background-image:url("../ui/hl_pink_small.webp")}
.ublog-car.ublog-btn::before{background-image:url("../ui/hl_blue_small.webp")}
.ublog-art.ublog-btn::before{background-image:url("../ui/hl_yellow_small.webp")}
.ublog-btn:hover::before,.ublog-btn:focus-visible::before,.ublog-btn[aria-expanded="true"]::before{opacity:.95}
.ublog-btn:focus-visible{outline:none}
.ublog-dot{position:absolute;top:-6px;right:-2px;width:16px;height:26px;background:url("../ui/dot.webp") top center/contain no-repeat;animation:ublogSplat 2.6s ease-in-out infinite}
@keyframes ublogSplat{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(5deg) scale(1.06)}}
@media (max-width:520px){.ublog-btn{padding:11px 15px 10px;font-size:15px}}

/* sheet */
html.ublog-lock,html.ublog-lock body{overflow:hidden !important}
.ublog{position:fixed;inset:0;z-index:10000;font-family:var(--ub-body);color:var(--ub-ink)}
.ublog[hidden]{display:none !important}
.ublog-scrim{position:absolute;inset:0;background:rgba(5,3,7,.62);opacity:0;transition:opacity .3s;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.ublog.on .ublog-scrim{opacity:1}
.ublog-panel{position:absolute;left:0;right:0;bottom:0;margin:0 auto;width:min(760px,100%);max-height:min(88vh,88svh);display:flex;flex-direction:column;
  background:#0f0c12;border-radius:18px 18px 0 0;box-shadow:0 -14px 40px rgba(0,0,0,.6);transform:translateY(102%);transition:transform .34s cubic-bezier(.2,.9,.25,1);
  padding-bottom:env(safe-area-inset-bottom)}
.ublog.on .ublog-panel{transform:none}
@media (min-width:900px){.ublog-panel{bottom:auto;top:50%;border-radius:16px;max-height:84vh;transform:translateY(-44%) scale(.97);opacity:0;transition:transform .3s,opacity .25s}
  .ublog.on .ublog-panel{transform:translateY(-50%);opacity:1}}
.ublog-head{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 18px 12px 22px;flex:0 0 auto}
.ublog-grab{position:absolute;left:50%;top:7px;width:44px;height:4px;margin-left:-22px;border-radius:4px;background:rgba(243,238,247,.22)}
@media (min-width:900px){.ublog-grab{display:none}}
.ublog-head h2{position:relative;margin:0;font:800 clamp(26px,6vw,36px)/1 var(--ub-head);text-transform:uppercase;letter-spacing:.03em}
.ublog-head h2 span{position:relative;isolation:isolate;padding:4px 10px 2px}
.ublog-head h2 span::before{content:"";position:absolute;inset:-14% -10% -22%;z-index:-1;background:center/100% 100% no-repeat;opacity:.9}
.ublog-me .ublog-head h2 span::before{background-image:url("../ui/hl_pink_big.webp")}
.ublog-car .ublog-head h2 span::before{background-image:url("../ui/hl_blue_big.webp")}
.ublog-art .ublog-head h2 span::before{background-image:url("../ui/hl_yellow_big.webp")}
.ublog-x{flex:0 0 auto;width:40px;height:40px;border:0;border-radius:50%;background:rgba(243,238,247,.08);color:var(--ub-ink);font:400 26px/1 var(--ub-body);cursor:pointer}
.ublog-x:hover{background:rgba(243,238,247,.16)}
.ublog-x:focus-visible,.ublog-card:focus-visible{outline:2px solid var(--ub-sec);outline-offset:2px}
.ublog-list{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:4px 16px 24px;display:grid;gap:12px}
.ublog-card{display:grid;grid-template-columns:112px minmax(0,1fr);gap:14px;align-items:start;padding:10px;border-radius:10px;color:inherit;text-decoration:none;
  background:rgba(243,238,247,.04);transition:background .2s,transform .2s}
.ublog-card:hover{background:rgba(243,238,247,.08)}
.ublog-card.going{transform:scale(.98);opacity:.7}
.ublog-img{position:relative;display:block;aspect-ratio:4/3;border-radius:7px;overflow:hidden;background:#211b26}
.ublog-img img{width:100%;height:100%;object-fit:cover;display:block}
.ublog-img b{position:absolute;inset:0;display:grid;place-items:center;font:800 40px/1 var(--ub-head);color:#120f14;text-transform:uppercase;
  background:var(--ub-sec) url("../ui/bg_small.webp") center/120% 120% no-repeat;background-blend-mode:multiply}
.ublog-txt{min-width:0;display:flex;flex-direction:column;gap:4px}
.ublog-meta{font:600 12px/1.3 var(--ub-head);letter-spacing:.12em;text-transform:uppercase;color:var(--ub-muted)}
.ublog-new{font-style:normal;color:#120f14;background:var(--ub-sec);padding:1px 6px;border-radius:3px;margin-left:4px}
.ublog-title{font:700 20px/1.15 var(--ub-head);letter-spacing:.02em;text-wrap:balance}
.ublog-ex{font:400 14px/1.45 var(--ub-body);color:rgba(243,238,247,.78);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ublog-empty{margin:18px 6px 28px;font:600 17px/1.4 var(--ub-head);letter-spacing:.06em;color:var(--ub-muted)}
@media (max-width:420px){.ublog-card{grid-template-columns:88px minmax(0,1fr);gap:11px}.ublog-title{font-size:18px}}
@media (prefers-reduced-motion:reduce){.ublog-panel,.ublog-scrim,.ublog-dot{transition:none !important;animation:none !important}}