.atlas-menu{--accent:#6366f1;--surface:#fff;--ink:#19283b;--radius:12px;--duration:260ms;position:relative;color:var(--ink);padding:16px;border-radius:var(--radius);background:var(--surface)}.atlas-menu ul{list-style:none;margin:0;padding:0}.atlas-root{display:flex;gap:8px;flex-wrap:wrap}.atlas-menu li{position:relative}.atlas-menu summary,.atlas-menu a{display:flex;align-items:center;gap:14px;justify-content:space-between;padding:12px 16px;border-radius:var(--radius);cursor:pointer;text-decoration:none;color:inherit;white-space:nowrap;font-size:14px}.atlas-menu summary{list-style:none}.atlas-menu summary::-webkit-details-marker{display:none}.atlas-menu summary::after{content:'⌄';font-size:15px}.atlas-menu a:hover,.atlas-menu summary:hover,.atlas-menu details[open]>summary{background:color-mix(in srgb,var(--accent) 13%,var(--surface));color:var(--accent)}.atlas-menu :focus-visible{outline:3px solid var(--accent);outline-offset:2px}.atlas-panel{position:absolute;left:0;top:100%;min-width:200px;padding:7px!important;border:1px solid color-mix(in srgb,var(--ink) 15%,transparent);border-radius:var(--radius);background:var(--surface);box-shadow:0 14px 35px #13243b20;z-index:10;transform-origin:top left}.atlas-panel .atlas-panel{left:100%;top:0}.atlas-menu details[open]>.atlas-panel{animation:var(--motion,atlas-fade) var(--duration) both}.atlas-pill .atlas-root>li>details>summary{border-radius:50px;border:1px solid var(--accent)}.atlas-underline .atlas-root>li>details>summary{border-radius:0;border-bottom:3px solid var(--accent)}.atlas-glass{--surface:#eff6ffff;background:linear-gradient(125deg,#e0e7ff,#d1fae5);border:1px solid #fff;box-shadow:0 12px 25px #6366f120}.atlas-glass .atlas-panel{backdrop-filter:blur(16px);background:#ffffffed}.atlas-dark{--surface:#142033;--ink:#e3eafa;border:1px solid #354258;font-family:monospace}.atlas-mega .atlas-root>li>details>.atlas-panel{min-width:370px;display:grid;grid-template-columns:1fr 1fr;gap:8px}.atlas-mega .atlas-panel .atlas-panel{position:static;box-shadow:none;margin-top:4px;min-width:0}.atlas-sidebar .atlas-root{flex-direction:column;max-width:190px}.atlas-sidebar .atlas-root>li>details>.atlas-panel{top:0;left:100%}.atlas-accordion .atlas-root{display:block}.atlas-accordion .atlas-panel{position:static;box-shadow:none;margin:6px 0 8px 15px;min-width:0}.atlas-accordion .atlas-panel .atlas-panel{position:static}.atlas-brutal{--radius:0px;border:2px solid var(--ink);box-shadow:5px 5px 0 var(--accent)}.atlas-brutal .atlas-panel{border:2px solid var(--ink);box-shadow:4px 4px 0 var(--accent)}.atlas-editorial{--radius:0px;font-family:Georgia,serif;border-top:2px solid var(--ink);border-bottom:1px solid var(--ink)}.atlas-editorial .atlas-root>li>details>summary{text-transform:uppercase;letter-spacing:2px}.atlas-selection{margin:20px 0 0;padding:12px;border:1px dashed #94a3b8;border-radius:8px;font-size:13px;color:#536580}.atlas-demo{padding:20px;min-height:350px}.atlas-demo-header{display:flex;justify-content:space-between;gap:12px;margin-bottom:18px;align-items:center}.atlas-demo-header h1{font-size:15px;margin:0}.atlas-controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:12px}.atlas-controls input[type=color]{width:30px;height:28px;border:0;padding:0;background:none}@keyframes atlas-fade{from{opacity:0}to{opacity:1}}@keyframes atlas-slide{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}@keyframes atlas-zoom{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:scale(1)}}@keyframes atlas-flip{from{opacity:0;transform:perspective(600px) rotateX(-35deg)}to{opacity:1;transform:perspective(600px) rotateX(0)}}@keyframes atlas-spring{0%{opacity:0;transform:translateY(-16px) scale(.95)}70%{transform:translateY(3px) scale(1.01)}100%{opacity:1;transform:translateY(0) scale(1)}}@media(max-width:600px){.atlas-root{display:block}.atlas-menu .atlas-panel,.atlas-menu .atlas-panel .atlas-panel,.atlas-sidebar .atlas-root>li>details>.atlas-panel{position:static;min-width:0;box-shadow:none;margin-left:10px}.atlas-sidebar .atlas-root{max-width:none}.atlas-mega .atlas-root>li>details>.atlas-panel{min-width:0;grid-template-columns:1fr}.atlas-demo{padding:12px}.atlas-demo-header{align-items:flex-start;flex-direction:column}}@media(prefers-reduced-motion:reduce){.atlas-menu details[open]>.atlas-panel{animation:none}}
/* Site integration: PC first; the same tree appears inside the mobile hamburger. */
.atlas-host{position:relative;overflow:visible;color:var(--ink);background:var(--surface)}
.atlas-header{box-sizing:border-box;display:flex;align-items:center;gap:28px;width:100%;max-width:var(--theme-page-max,1240px);margin-inline:auto;padding:16px 24px;background:var(--surface);color:var(--ink)}
.atlas-brand{font-size:26px;font-weight:700;text-decoration:none;color:inherit;white-space:nowrap}.atlas-header>.atlas-menu{flex:1;min-width:0;padding:8px;background:inherit}.atlas-root{justify-content:flex-end}.atlas-menu a{border:1px solid transparent}.atlas-pill .atlas-root>li>a{border-color:var(--accent);border-radius:50px}.atlas-underline .atlas-root>li>a{border-radius:0;border-bottom:3px solid var(--accent)}.atlas-editorial .atlas-root>li>a{text-transform:uppercase;letter-spacing:2px}.atlas-mobile{display:none}.atlas-mobile>summary{cursor:pointer;list-style:none;font-size:24px;padding:8px}.atlas-mobile>summary::-webkit-details-marker{display:none}.atlas-mobile-panel{box-sizing:border-box;position:absolute;top:100%;right:0;z-index:50;width:min(390px,100%);padding:20px;background:var(--surface);border:1px solid var(--soft,#ddd);box-shadow:0 15px 35px #0002;max-height:70vh;overflow:auto}.atlas-mobile-panel .atlas-root{display:block}.atlas-mobile-panel .atlas-panel{position:static;min-width:0;margin-left:10px;box-shadow:none}.atlas-menu .atlas-panel{font-family:inherit}.atlas-host a[aria-current=page]{color:var(--accent);background:var(--soft,#f2f2f2)}
@media(min-width:901px){.atlas-sidebar .atlas-root,.atlas-accordion .atlas-root{display:flex;flex-direction:row;max-width:none}.atlas-sidebar .atlas-root>li>details>.atlas-panel{top:100%;left:0}}
@media(max-width:900px){.atlas-header>.atlas-menu{display:none}.atlas-mobile{display:block;margin-left:auto}.atlas-mobile-panel .atlas-menu{display:block}.atlas-mobile-panel .atlas-root{display:block}.atlas-mobile-panel .atlas-root>li>details>.atlas-panel{position:static;min-width:0;display:block}.atlas-header{padding:12px 18px}}

/* Right-edge PC menus must open inward, including the third level. */
@media(min-width:901px){.atlas-header>.atlas-menu>.atlas-root>li:nth-last-child(-n+2)>details>.atlas-panel{left:auto;right:0}.atlas-header>.atlas-menu>.atlas-root>li:nth-last-child(-n+2) .atlas-panel .atlas-panel{left:auto;right:100%}.atlas-header>.atlas-menu>.atlas-root>li:nth-last-child(-n+2) .atlas-panel{max-width:calc(100vw - 48px)}}

/* One responsive navigation, with dropdowns above following content. */
.atlas-host{z-index:30}.atlas-host .atlas-header{position:relative}.atlas-host .atlas-mobile-panel{z-index:60}@media(max-width:900px){.atlas-header>.m31-nav{display:none!important}}

.render-section:has([data-source-menu]),.render-section:has([data-atlas-menu]),.render-section:has([data-existing-menu]){position:relative;z-index:40;overflow:visible;isolation:auto}

/* Website design tokens must reach nested PC and mobile navigation. */
.atlas-host .atlas-menu{--accent:inherit;--surface:inherit;--ink:inherit;--soft:inherit;font-family:inherit}
.atlas-host[data-custom-menu-background] .atlas-menu{background:var(--surface)}

/* Real company names replace the short sample logo; leave room for the mobile toggle. */
.atlas-header>.atlas-brand,.m31-bar>.m31-logo{min-width:0;max-width:min(45vw,260px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:1}.atlas-header>.atlas-mobile{flex-shrink:0}
@media(max-width:900px){.atlas-header>.atlas-brand,.m31-bar>.m31-logo{max-width:calc(100vw - 140px)}}

/* Brand names remain readable on narrow screens; mobile actions retain their own space. */
@media(max-width:900px){.atlas-header>.atlas-brand,.m31-bar>.m31-logo{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35;overflow-wrap:anywhere;word-break:normal}.atlas-header{align-items:center}.atlas-brand:lang(th),.m31-logo:lang(th){letter-spacing:normal!important}}