.trhm { --trhm-admin: 0px; --trhm-accent: #1748cd; color: var(--trhm-fg); }
body.admin-bar .trhm { --trhm-admin: 32px; }
.trhm .trhm-toggle, .trhm .trhm-close { box-sizing: border-box; display: grid; place-items: center; width: 52px; height: 52px; padding: 12px; border: 1px solid var(--trhm-accent); border-radius: 50%; background: var(--trhm-bg); color: var(--trhm-accent); cursor: pointer; line-height: 1; box-shadow: none; transition: color 200ms ease, background-color 200ms ease, box-shadow 200ms ease; }
.trhm .trhm-toggle { position: fixed; top: calc(var(--trhm-top) + var(--trhm-admin) + env(safe-area-inset-top, 0px)); z-index: 99990; box-shadow: 0 3px 18px #00000018; }
.trhm .trhm-toggle:hover, .trhm .trhm-close:hover { background: var(--trhm-accent); color: #fff; box-shadow: 0 4px 20px rgb(23 72 205 / 20%); }
.trhm-right .trhm-toggle { right: max(20px, env(safe-area-inset-right, 0px)); }
.trhm-left .trhm-toggle { left: max(20px, env(safe-area-inset-left, 0px)); }
.trhm .trhm-toggle[hidden] { display: none; }
.trhm-bars { display: grid; gap: 5px; width: 22px; }
.trhm-bars span { display: block; height: 2px; background: currentColor; width: 100%; }
.trhm .trhm-dialog { box-sizing: border-box; position: fixed; inset: 0 0 0 auto; margin: 0; padding: max(28px, env(safe-area-inset-top, 0px)) 28px max(28px, env(safe-area-inset-bottom, 0px)); border: 0; border-radius: 0; width: min(420px, 90vw); max-width: 100vw; height: 100%; height: 100dvh; max-height: none; overflow-y: auto; overscroll-behavior: contain; background: var(--trhm-bg); color: var(--trhm-fg); box-shadow: -10px 0 60px #00000020; font-family: inherit; }
.trhm-left .trhm-dialog { inset: 0 auto 0 0; }
.trhm-dialog::backdrop { background: rgb(0 0 0 / 45%); backdrop-filter: blur(3px); }
.trhm-dialog[open] { animation: trhm-enter-right 200ms ease-out; }
.trhm-left .trhm-dialog[open] { animation-name: trhm-enter-left; }
.trhm-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 36px; }
.trhm #trhm-title { color: inherit; font: inherit; font-size: 22px; font-weight: 600; margin: 0; overflow-wrap: anywhere; }
.trhm .trhm-close { flex-shrink: 0; width: 44px; height: 44px; padding: 0; border: 0; font: 32px/1 Arial, sans-serif; }
.trhm #trhm-links, .trhm #trhm-links ul { display: block; position: static; float: none; visibility: visible; opacity: 1; width: auto; height: auto; list-style: none; margin: 0; padding: 0; background: transparent; box-shadow: none; transform: none; }
.trhm #trhm-links li { display: block; float: none; margin: 0; padding: 0; }
.trhm #trhm-links a { position: relative; display: block; padding: 14px 0; color: var(--trhm-fg); font-size: 21px; line-height: 1.4; text-decoration: none; overflow-wrap: anywhere; border-bottom: 1px solid rgb(23 72 205 / 18%); background: linear-gradient(90deg, rgb(23 72 205 / 9%), rgb(23 72 205 / 2%)) left center / 0% 100% no-repeat; transition: color 220ms ease, background-size 260ms ease; }
.trhm #trhm-links a::after { content: ''; position: absolute; inset: auto 0 -1px; height: 2px; background: var(--trhm-accent); transform: scaleX(0); transform-origin: left; transition: transform 260ms ease; }
.trhm #trhm-links ul { padding-inline-start: 20px; }
.trhm #trhm-links ul a { font-size: 17px; }
.trhm #trhm-links a:hover, .trhm #trhm-links a:focus-visible, .trhm #trhm-links .current-menu-item > a { color: var(--trhm-accent); background-size: 100% 100%; }
.trhm #trhm-links a:hover::after, .trhm #trhm-links a:focus-visible::after, .trhm #trhm-links .current-menu-item > a::after { transform: scaleX(1); }
.trhm button:focus-visible, .trhm a:focus-visible { outline: 3px solid var(--trhm-accent); outline-offset: 4px; }
@keyframes trhm-enter-right { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes trhm-enter-left { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@media (max-width: 782px) { body.admin-bar .trhm { --trhm-admin: 46px; } }
@media (min-width: 1025px) { .trhm-mobile-only { display: none; } }
@media (prefers-reduced-motion: reduce) { .trhm-dialog[open] { animation: none; } .trhm .trhm-toggle, .trhm .trhm-close, .trhm #trhm-links a, .trhm #trhm-links a::after { transition: none; } }