/* Language selector (website/i18n/menu.mjs). Shared by the homepage, blog and localized pages. */
.lang-picker{position:relative;flex-shrink:0;font-family:Manrope,-apple-system,BlinkMacSystemFont,sans-serif}
.lang-picker summary{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:8px 11px;border-radius:30px;list-style:none;cursor:pointer;font-size:12px;font-weight:600;line-height:1;letter-spacing:.02em;color:var(--muted);white-space:nowrap;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;transition:color .2s,background .2s}
.lang-picker summary::-webkit-details-marker{display:none}
.lang-picker summary::marker{content:""}
.lang-picker summary:hover,.lang-picker[open] summary{color:var(--ink);background:#42352609}
.lang-picker summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.lang-globe{width:15px;height:15px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.15}
.lang-chevron{width:9px;height:9px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.lang-picker[open] .lang-chevron{transform:rotate(180deg)}
.lang-menu{position:absolute;top:calc(100% + 10px);right:0;z-index:40;width:max-content;min-width:296px;max-width:calc(100vw - 32px);padding:12px;border:1px solid #42352622;border-radius:20px;background:#f6e9dff5;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 26px 60px -30px #4a302070,0 2px 10px -6px #4a302030;text-align:left}
.lang-menu-title{margin:4px 10px 9px!important;font-size:9px!important;font-weight:700;line-height:1.4!important;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)!important}
.lang-menu ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;margin:0;padding:0;list-style:none}
.lang-menu li{margin:0;padding:0}
.lang-menu li:before{content:none!important}
.lang-menu a{display:block;padding:9px 12px;border-radius:12px;font-size:13px;font-weight:550;line-height:1.3;letter-spacing:-.005em;color:var(--ink);white-space:nowrap;text-decoration:none;transition:background .15s}
.lang-menu a:hover{background:#a6694414;color:var(--ink);text-decoration:none}
.lang-menu a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.lang-menu a[aria-current]{color:var(--accent);background:#a6694416;font-weight:700}
.lang-picker-footer .lang-menu{top:auto;bottom:calc(100% + 10px)}
.lang-picker-footer summary{min-height:30px;padding:6px 9px;font-size:inherit}
@media(max-width:800px), (max-width:1100px) and (orientation:portrait){
 .site-header .lang-picker summary{padding:8px 9px;gap:5px}
 .site-header .lang-chevron,.blog-header .lang-chevron{display:none}
}
@media(max-width:600px){
 .lang-menu{position:fixed;left:16px;right:16px;width:auto;min-width:0;max-width:none;max-height:calc(100svh - 112px);overflow-y:auto;overscroll-behavior:contain}
 .lang-picker-header .lang-menu{top:68px;bottom:auto}
 .lang-picker-footer .lang-menu{top:auto;bottom:16px}
 .lang-menu a{padding:11px 12px;font-size:14px}
}
/* Feature menu (website/i18n/menu.mjs): every chapter of the homepage films, from the homepage and the blog. */
.feature-picker{position:relative;flex-shrink:0;font-family:Manrope,-apple-system,BlinkMacSystemFont,sans-serif}
.feature-picker summary{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:8px 12px;border-radius:30px;list-style:none;cursor:pointer;font-size:12px;font-weight:600;line-height:1;letter-spacing:.01em;color:var(--muted);white-space:nowrap;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;transition:color .2s,background .2s}
.feature-picker summary::-webkit-details-marker{display:none}
.feature-picker summary::marker{content:""}
.feature-picker summary:hover,.feature-picker[open] summary{color:var(--ink);background:#42352609}
.feature-picker summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.feature-icon{width:14px;height:14px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.25}
.feature-picker[open] .lang-chevron{transform:rotate(180deg)}
.feature-menu{position:absolute;top:calc(100% + 10px);right:0;z-index:40;width:440px;max-width:calc(100vw - 32px);padding:12px 12px 10px;border:1px solid #42352622;border-radius:20px;background:#f6e9dff5;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 26px 60px -30px #4a302070,0 2px 10px -6px #4a302030;text-align:left;font-size:13px}
.feature-picker .feature-menu{display:block;gap:0;font-size:13px;font-weight:400}
.feature-group+.feature-group{margin-top:8px}
.feature-group-title{margin:4px 10px 7px!important;font-size:9px!important;font-weight:700;line-height:1.4!important;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)!important}
.feature-menu ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;margin:0;padding:0;list-style:none}
.feature-menu li{margin:0;padding:0}
.feature-menu li:before{content:none!important}
.feature-menu a{display:block;padding:9px 12px;border-radius:12px;font-size:13px;font-weight:550;line-height:1.3;letter-spacing:-.005em;color:var(--ink);text-decoration:none;transition:background .15s}
.feature-menu a:hover{background:#a6694414;color:var(--ink);text-decoration:none}
.feature-menu a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.feature-menu .feature-more{display:flex;flex-wrap:wrap;gap:2px;margin-top:10px;padding-top:8px;border-top:1px solid #42352616}
.feature-more a{padding:8px 12px;font-size:12px;font-weight:600;color:var(--muted)}
@media(max-width:800px), (max-width:1100px) and (orientation:portrait){
 .feature-picker summary{padding:8px 9px}
 .feature-picker .lang-chevron{display:none}
 .feature-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
 .feature-icon{width:16px;height:16px}
}
/* On small phones the blog header keeps the menu, the languages and Download; Blog is in the menu. */
@media(max-width:520px){.blog-header:has(.feature-picker) .nav-blog{display:none}}
@media(max-width:600px){
 .feature-menu{position:fixed;top:68px;left:16px;right:16px;width:auto;max-width:none;max-height:calc(100svh - 112px);overflow-y:auto;overscroll-behavior:contain}
 .feature-menu a{padding:11px 12px;font-size:14px}
 .feature-more a{font-size:13px}
}
@media(prefers-reduced-motion:reduce){.lang-picker summary,.lang-chevron,.lang-menu a,.feature-picker summary,.feature-menu a{transition:none}}

/* Scripts the Latin display faces do not cover. */
/* Vietnamese: Instrument Serif lacks the stacked diacritics, so the accent words use a serif that has them. */
:lang(vi) :is(h1,h2,h3) em,:lang(vi) .closing em{font-family:Georgia,"Times New Roman",serif}
/* CJK: no negative tracking, upright accent words in a CJK serif, word-aware line breaking. */
:lang(ja) :is(h1,h2,h3,.line),:lang(zh) :is(h1,h2,h3,.line),:lang(ko) :is(h1,h2,h3,.line){letter-spacing:-.01em!important}
:lang(ja) :is(h1,h2,h3) em,:lang(ja) .closing em{font-family:Instrument,"Hiragino Mincho ProN","Yu Mincho",YuMincho,serif;font-style:normal}
:lang(zh-Hans) :is(h1,h2,h3) em,:lang(zh-Hans) .closing em{font-family:Instrument,"Songti SC",STSong,"Noto Serif SC",serif;font-style:normal}
:lang(zh-Hant) :is(h1,h2,h3) em,:lang(zh-Hant) .closing em{font-family:Instrument,"Songti TC","Noto Serif TC",serif;font-style:normal}
:lang(ko) :is(h1,h2,h3) em,:lang(ko) .closing em{font-family:Instrument,AppleMyungjo,"Nanum Myeongjo","Noto Serif KR",serif;font-style:normal}
:lang(ja),:lang(zh){line-break:strict}
:lang(ja) :is(h1,h2,h3){word-break:auto-phrase}
:lang(ko){word-break:keep-all}
:lang(ja) .scene-copy .line:first-child:after,:lang(zh) .scene-copy .line:first-child:after,:lang(ja) :is(.meeting-copy,.settings-copy) h2 em:before,:lang(zh) :is(.meeting-copy,.settings-copy) h2 em:before{content:""}
/* Full-width CJK glyphs need smaller display headlines than the Latin sizes in style.css/blog.css. */
:lang(ja){--display-scale:.7}
:lang(zh){--display-scale:.76}
:lang(ko){--display-scale:.76}
/* Phones join Latin headline lines into one wrapping line; short CJK headlines read better on their own lines. */
@media(max-width:800px), (max-width:1100px) and (orientation:portrait){
 :lang(ja) .scene-copy .line,:lang(zh) .scene-copy .line{display:block}
 :lang(ja) :is(.meeting-copy,.settings-copy) h2 br,:lang(zh) :is(.meeting-copy,.settings-copy) h2 br{display:revert}
 :lang(ko) .scene-copy .line:first-child:after{content:" "}
}
/* Vietnamese spaces separate syllables, so free wrapping splits words: keep the two headline lines on phones. */
@media(max-width:800px), (max-width:1100px) and (orientation:portrait){
 :lang(vi){--display-scale:.9}
 :lang(vi) .scene-copy .line{display:block}
 :lang(vi) .scene-copy .line:first-child:after{content:""}
}
/* Chinese headings: break at spaces and punctuation when possible (CSS cannot segment Chinese words), anywhere if a run is too long. */
:lang(zh) :is(h1,h2,h3){word-break:keep-all;overflow-wrap:anywhere}