.och-root{ --och-bg:#0d0f12; --och-panel:#15181d; --och-line:#2a2f37; --och-ink:#e9ecf1; --och-ink-dim:#8a919c; --och-accent:#ff8a3d; --och-accent-dim:#6b4326; position:relative; z-index:9999; display:inline-block; }
.och-root[data-theme="light"]{ --och-bg:#faf9f6; --och-panel:#ffffff; --och-line:#e3e0d8; --och-ink:#1c1b19; --och-ink-dim:#837f74; --och-accent:#b0530f; --och-accent-dim:#f0d9c2; }

.och-burger{ display:flex; align-items:center; gap:12px; background:var(--och-panel); border:1px solid var(--och-line); border-radius:10px; padding:8px 14px; cursor:pointer; font-family:inherit; transition:border-color .25s ease; }
.och-burger:hover{ border-color:var(--och-accent-dim); }
.och-burger:focus-visible{ outline:2px solid var(--och-accent); outline-offset:2px; }
.och-brand{ font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--och-ink-dim); }
.och-lines{ position:relative; width:20px; height:14px; flex-shrink:0; }
.och-lines span{ position:absolute; left:0; width:100%; height:2px; border-radius:2px; background:var(--och-ink); transition:transform .32s cubic-bezier(.65,0,.35,1), opacity .2s ease, top .32s cubic-bezier(.65,0,.35,1), width .25s ease; }
.och-lines span:nth-child(1){ top:0; }
.och-lines span:nth-child(2){ top:6px; width:70%; }
.och-lines span:nth-child(3){ top:12px; }
.och-burger.och-open .och-lines span:nth-child(1){ top:6px; transform:rotate(45deg); }
.och-burger.och-open .och-lines span:nth-child(2){ opacity:0; width:0; }
.och-burger.och-open .och-lines span:nth-child(3){ top:6px; transform:rotate(-45deg); }

.och-scrim{ position:fixed; inset:0; background:rgba(0,0,0,.5); backdrop-filter:blur(2px); opacity:0; pointer-events:none; transition:opacity .35s ease; z-index:9998; }
.och-scrim.och-show{ opacity:1; pointer-events:auto; }

html.och-scroll-locked, body.och-scroll-locked{ overflow:hidden !important; overscroll-behavior:none; }

.och-panel{ position:fixed; top:0; height:100vh; height:100dvh; width:min(340px,86vw); box-sizing:border-box; background:var(--och-panel); z-index:9999; display:flex; flex-direction:column; padding:72px 8px 24px; transition:transform .4s cubic-bezier(.65,0,.35,1); overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y; -webkit-overflow-scrolling:touch; }
.och-root[data-position="right"] .och-panel{ right:0; border-left:1px solid var(--och-line); transform:translateX(100%); }
.och-root[data-position="left"] .och-panel{ left:0; border-right:1px solid var(--och-line); transform:translateX(-100%); }
.och-root[data-position] .och-panel.och-open{ transform:translateX(0); }

.och-close{ position:absolute; top:20px; right:20px; width:36px; height:36px; border-radius:8px; background:transparent; border:1px solid var(--och-line); color:var(--och-ink); font-size:20px; line-height:1; cursor:pointer; }
.och-close:hover{ border-color:var(--och-accent-dim); color:var(--och-accent); }

.och-nav-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.och-nav-list li{ border-bottom:1px solid var(--och-line); }
.och-nav-list li:last-child{ border-bottom:none; }
.och-nav-list a{ display:block; padding:14px 20px; color:var(--och-ink); text-decoration:none; font-size:18px; font-weight:500; opacity:0; transform:translateX(16px); transition:opacity .3s ease, transform .3s ease, color .2s ease, background .2s ease; }
.och-panel.och-open .och-nav-list a{ opacity:1; transform:translateX(0); }
.och-nav-list a:hover, .och-nav-list a:focus-visible{ color:var(--och-accent); background:rgba(128,128,128,.08); outline:none; }
.och-nav-list .sub-menu{ list-style:none; margin:0; padding:0 0 0 16px; }
.och-nav-list .sub-menu a{ font-size:15px; color:var(--och-ink-dim); }

@media (prefers-reduced-motion: reduce){
  .och-lines span, .och-panel, .och-nav-list a, .och-scrim{ transition:none !important; }
}