
#connectionDialog{--paper-ink:#263b1c;--paper-line:#263b1c66;position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:var(--paper-ink);overflow:hidden;outline:none}
#connectionDialog:not([open]){display:none}
#connectionDialog::backdrop{background:transparent}
html body #connectionDialog,html body #connectionDialog *{font-family:ZemuSerif,serif!important;box-sizing:border-box}
#connectionDialog .connection-paper{position:absolute;isolation:isolate;left:var(--panel-left,16px);top:var(--panel-top,29vh);width:var(--panel-width,calc(100% - 32px));height:var(--panel-height,calc(71dvh - 16px));padding:clamp(24px,2.4vw,52px);background:#848f7a;color:var(--paper-ink);overflow:auto;overscroll-behavior:contain;scrollbar-width:none;overflow-anchor:none;outline:none}
#connectionDialog .connection-paper::before{content:"";position:absolute;inset:0;z-index:-2;background:url('./paper-texture.jpg') top/100% 100%;pointer-events:none}
#connectionDialog .connection-paper::after{content:"";position:absolute;inset:0;z-index:-1;background:#000;opacity:.1;pointer-events:none}
#connectionDialog .connection-head{position:sticky;top:0;z-index:5;display:flex;justify-content:flex-end;margin-bottom:20px;pointer-events:none}
#connectionDialog .connection-close{pointer-events:auto;padding:0 0 0 12px;min-height:32px;border:0;color:inherit;background:none;cursor:pointer;font-size:18px;line-height:1.5}
#connectionDialog .connection-roll-window{display:block;overflow:hidden;height:1.5em}
#connectionDialog .connection-roll-track{display:block;position:relative;height:100%;transform:translateY(0);transition:none}
#connectionDialog .connection-roll-track>span{display:block;white-space:nowrap}
#connectionDialog .connection-roll-copy{position:absolute;top:100%;left:0}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){#connectionDialog[data-ready="true"] .connection-close:hover .connection-roll-track{transform:translateY(-100%);transition:transform .4s cubic-bezier(.215,.61,.355,1)}}
#connectionDialog .connection-columns{position:relative;display:grid;grid-template-columns:minmax(0,2fr) minmax(320px,1fr);gap:clamp(32px,4vw,86px);min-height:calc(100% - 52px)}
#connectionDialog .connection-divider{position:absolute;left:calc((100% - clamp(32px,4vw,86px)) * 2 / 3 + clamp(32px,4vw,86px) / 2);top:0;bottom:0;width:1px;background:var(--paper-line);transform-origin:top;pointer-events:none}
#connectionDialog .contact{padding:0;min-height:0;background:transparent;color:inherit;overflow:visible;display:flex;flex-direction:column}
#connectionDialog .contact::before{display:none}
#connectionDialog .connection-title,#connectionDialog .auth-card h1{margin:0 0 32px;font-size:32px;font-weight:300;line-height:1.25;letter-spacing:.025em;color:inherit}
#connectionDialog .contact-directory{grid-template-columns:1fr 1fr 1.35fr 1.2fr;gap:clamp(18px,2vw,42px);margin:0 0 60px;min-height:220px}
#connectionDialog .contact-col,#connectionDialog .contact-col-title,#connectionDialog .contact-capture label,#connectionDialog .contact input,#connectionDialog .contact .site-foot,#connectionDialog .contact .site-foot-bottom,#connectionDialog .contact .site-foot__icp,#connectionDialog .contact .site-foot__privacy,#connectionDialog .contact .brief-status{color:inherit}
#connectionDialog .contact-col-title{font-size:14px;opacity:.8}
#connectionDialog .contact-col,#connectionDialog .contact-capture label,#connectionDialog .contact-capture input{font-size:15px}
#connectionDialog .contact input{border-color:var(--paper-line)}
#connectionDialog .contact input::placeholder{color:#263b1c99}
#connectionDialog .contact .brief-submit{border-color:var(--paper-ink);color:inherit}
#connectionDialog .contact .brief-submit span{color:inherit}
#connectionDialog .contact .site-foot{margin-top:auto;opacity:1!important;transform:none!important;transition:none;border-color:var(--paper-line)}
#connectionDialog .contact .site-foot-bottom{flex-wrap:wrap;gap:8px}
#connectionDialog .contact .site-foot__records{flex-wrap:wrap;justify-content:flex-start;gap:8px}
#connectionDialog .contact-back-top{background:var(--paper-ink);color:#b5bea6}
#connectionDialog .contact-social-tag{border-color:var(--paper-line);color:inherit}
#connectionDialog .contact-social-tag img{filter:invert(16%) sepia(19%) saturate(934%) hue-rotate(48deg) brightness(82%)}
#connectionDialog .connection-login{display:flex;align-items:flex-start;justify-content:center;min-width:0}
#connectionDialog .auth-card{width:100%;max-width:420px;margin:0;padding:0;border:0;background:none;color:inherit;box-shadow:none}
#connectionDialog .auth-card h1{margin-bottom:7px}
#connectionDialog .auth-card .sub{margin:0 0 32px;font-size:15px;opacity:.8}
#connectionDialog .field{margin-bottom:20px}
#connectionDialog .field label{display:block;margin-bottom:3px;font-size:15px}
#connectionDialog .control{position:relative}
#connectionDialog .control input{width:100%;height:50px;padding:0 56px 0 0;border:0;border-bottom:1px solid var(--paper-line);border-radius:0;background:transparent;color:inherit;font-size:17px;box-shadow:none}
#connectionDialog .control input::placeholder{color:#263b1c99}
#connectionDialog .control input:focus{outline:none;border-bottom-color:var(--paper-ink);border-bottom-width:2px}
#connectionDialog .toggle{position:absolute;right:0;top:0;height:50px;padding:0;border:0;background:none;color:inherit;cursor:pointer;font-size:14px}
#connectionDialog .check{display:flex;align-items:center;gap:10px;margin-top:22px;font-size:15px;cursor:pointer}
#connectionDialog .check input{width:16px;height:16px;accent-color:var(--paper-ink)}
#connectionDialog .submit{display:block;width:100%;margin-top:30px;padding:14px 20px;border:1px solid var(--paper-ink);border-radius:0;background:var(--paper-ink);color:#bac3ad;font-size:17px;letter-spacing:.2em;cursor:pointer}
#connectionDialog .submit:hover:not(:disabled){background:#354c2a}
#connectionDialog .submit:disabled{opacity:.6;cursor:wait}
#connectionDialog .alert{display:none;margin-top:16px;padding:10px 12px;border:1px solid currentColor;color:#66291d;font-size:14px;line-height:1.6}
#connectionDialog .alert.is-on{display:block}
#connectionDialog .alert.is-info{color:var(--paper-ink)}
#connectionDialog .has-error input{border-color:#66291d}
#connectionDialog :focus-visible{outline:1px solid currentColor;outline-offset:4px}
html.connection-panel-open{overflow:hidden}
@media(max-width:1200px){#connectionDialog .connection-columns{grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr)}#connectionDialog .connection-divider{left:calc((100% - 4vw) * .6 + 2vw)}#connectionDialog .contact-directory{grid-template-columns:1fr 1fr;gap:24px}#connectionDialog .contact-capture{grid-column:auto;grid-row:auto}#connectionDialog .contact-col-details{grid-column:auto;grid-row:auto}}
@media(max-width:900px){#connectionDialog .connection-columns{display:flex;flex-direction:column;gap:42px}#connectionDialog .connection-divider{position:relative;left:auto;top:auto;bottom:auto;width:100%;height:1px;flex:none;transform-origin:left}#connectionDialog .contact-directory{grid-template-columns:1fr 1fr;gap:24px;margin-bottom:65px}#connectionDialog .contact-capture{grid-column:1/-1}#connectionDialog .contact .site-foot__privacy{font-size:11px}#connectionDialog .contact-col-details{display:flex;flex-direction:column;grid-column:1/-1}#connectionDialog .contact-col-details>*{grid-column:auto!important;grid-row:auto!important}#connectionDialog .contact-col-details .contact-qr-list{margin-top:12px}#connectionDialog .connection-title,#connectionDialog .auth-card h1{font-size:28px}#connectionDialog .connection-login{padding-bottom:20px}}

#connectionDialog .connection-text-mask{display:block;overflow:hidden}#connectionDialog .connection-text-line{display:block}

#connectionDialog .connection-paper{background-image:linear-gradient(#0000001a,#0000001a),url('./paper-texture.jpg');background-size:100% 100%;background-attachment:local}
#connectionDialog .connection-paper::before,#connectionDialog .connection-paper::after{display:none}
#connectionDialog .connection-paper:focus-visible{outline:none}
#connectionDialog .control input:-webkit-autofill,#connectionDialog .control input:-webkit-autofill:hover,#connectionDialog .control input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px #77846d inset!important;-webkit-text-fill-color:#263b1c!important;caret-color:#263b1c}

/* The two entrances share one right-hand navigation group. */
#zemu-opening-shell .desktop-nav .connection-nav{position:relative;display:flex;flex-direction:column;gap:4px;align-items:flex-start;padding-right:58px;line-height:1.25}
#zemu-opening-shell .desktop-nav .connection-nav>a{font:inherit;white-space:nowrap}
#zemu-opening-shell .desktop-nav .connection-nav .contact-link{gap:0}
#zemu-opening-shell .desktop-nav .connection-nav .contact-link>span:last-child{position:absolute;right:0;top:50%;transform:translateY(-50%)}

/* Full-width sheet with balanced, readable form spacing. */
#connectionDialog .connection-paper{left:var(--panel-left,0px);width:var(--panel-width,100%)}
#connectionDialog .connection-title,#connectionDialog .auth-card h1{font-size:36px}
#connectionDialog .contact-col{font-size:18px;line-height:1.65;gap:14px}
#connectionDialog .contact-col-title{font-size:16px;margin-bottom:20px}
#connectionDialog .contact-directory{min-height:320px;margin-bottom:50px}
#connectionDialog .contact-social-tag{width:118px;min-height:38px;font-size:15px;padding:7px 10px}
#connectionDialog .contact-col-details{gap:14px}
#connectionDialog .contact-qr-list{margin-top:18px;gap:20px}
#connectionDialog .contact-qr-item{width:64px;height:64px}
#connectionDialog .contact-capture{gap:16px}
#connectionDialog .contact-capture label{font-size:16px;gap:12px}
#connectionDialog .contact-capture input{font-size:17px;height:38px}
#connectionDialog .contact-capture .brief-submit{font-size:17px;padding-bottom:7px}
#connectionDialog .contact-capture .brief-status{font-size:13px}
#connectionDialog .auth-card{max-width:460px}
#connectionDialog .auth-card .sub{font-size:16px;line-height:1.6;margin-bottom:36px}
#connectionDialog .field{margin-bottom:28px}
#connectionDialog .field label{font-size:16px;margin-bottom:10px}
#connectionDialog .control input{height:58px;padding:0 76px 0 16px;border:1px solid var(--paper-line);background:#263b1c0a;font-size:18px;line-height:1.5}
#connectionDialog .control input:focus{border:1px solid var(--paper-ink);outline:1px solid var(--paper-ink);outline-offset:0}
#connectionDialog .toggle{right:16px;height:58px;font-size:15px;min-width:36px}
#connectionDialog .check{font-size:16px;margin-top:28px;gap:12px}
#connectionDialog .submit{min-height:58px;margin-top:32px;font-size:18px}
#connectionDialog .has-error input{border-color:#66291d}
@media(max-width:1200px){#connectionDialog .contact-directory{min-height:0;row-gap:32px}}
@media(max-width:600px){#connectionDialog .connection-title,#connectionDialog .auth-card h1{font-size:30px}#connectionDialog .contact-col{font-size:16px}#connectionDialog .contact-col-title{font-size:15px}#connectionDialog .contact-directory{gap:28px}#connectionDialog .contact-col-details{gap:10px}#connectionDialog .field{margin-bottom:24px}#connectionDialog .control input{font-size:17px}}

@media(min-width:901px){#connectionDialog .connection-login{align-items:center}}

#connectionDialog .contact-col{font-size:18px!important}
#connectionDialog .contact-col-title{font-size:16px!important;color:inherit!important}
#connectionDialog .contact-social-tag{font-size:15px!important}
#connectionDialog .contact-capture label{font-size:16px!important}
#connectionDialog .contact-capture input,#connectionDialog .contact-capture .brief-submit{font-size:17px!important}
@media(max-width:600px){#connectionDialog .contact-col{font-size:16px!important}#connectionDialog .contact-col-title{font-size:15px!important}}

/* A closer content group inside the unchanged full-width sheet. */
@media(min-width:1201px){
#connectionDialog .connection-columns{width:100%;max-width:1940px;margin:0 auto;gap:48px}
#connectionDialog .connection-divider{left:calc((100% - 48px) * 2 / 3 + 24px)}
#connectionDialog .contact-directory{gap:26px;min-height:280px;margin-bottom:38px}
#connectionDialog .contact-col{gap:12px}
#connectionDialog .contact-col-title{margin-bottom:14px}
#connectionDialog .contact-social-tag{min-height:36px;padding-top:6px;padding-bottom:6px}
#connectionDialog .auth-card{max-width:420px}
#connectionDialog .auth-card .sub{margin-bottom:26px}
#connectionDialog .field{margin-bottom:22px}
#connectionDialog .field label{margin-bottom:8px}
#connectionDialog .control input,#connectionDialog .toggle{height:52px}
#connectionDialog .check{margin-top:22px}
#connectionDialog .submit{min-height:52px;margin-top:24px;padding-top:12px;padding-bottom:12px}
}

/* A shared compact baseline, with deliberate empty space to the left. */
@media(min-width:1201px){
 #connectionDialog .connection-columns{width:calc(100% - 7vw);max-width:1920px;margin-inline:auto;gap:48px;min-height:0;align-items:start}
 #connectionDialog .contact{padding-left:clamp(48px,5vw,110px)}
 #connectionDialog .connection-login{align-items:flex-start;padding-top:0}
 #connectionDialog .connection-title,#connectionDialog .auth-card h1{font-size:34px;line-height:1.25}
 #connectionDialog .connection-title{margin-bottom:32px}
 #connectionDialog .contact-directory{grid-template-columns:minmax(110px,.8fr) minmax(118px,.85fr) minmax(210px,1.25fr) minmax(225px,1.25fr);gap:20px;min-height:270px;margin-bottom:0}
 #connectionDialog .contact-col{font-size:16px!important;gap:10px;line-height:1.65}
 #connectionDialog .contact-col-title{font-size:15px!important;margin-bottom:14px}
 #connectionDialog .contact-capture label{font-size:15px!important}
 #connectionDialog .contact-capture input,#connectionDialog .contact-capture .brief-submit{font-size:16px!important}
 #connectionDialog .contact-social{gap:20px}
 #connectionDialog .contact-col-details{gap:10px}
 #connectionDialog .contact-qr-list{margin-top:14px;gap:16px}
 #connectionDialog .contact-capture{gap:14px}
 #connectionDialog .auth-card .sub{font-size:15px;margin-bottom:26px}
}
#connectionDialog input:not([type="checkbox"]){cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='28' viewBox='0 0 20 28'%3E%3Cpath d='M6 3h8M10 3v22M6 25h8' fill='none' stroke='%23f4f0e8' stroke-width='5'/%3E%3Cpath d='M6 3h8M10 3v22M6 25h8' fill='none' stroke='%23141910' stroke-width='2'/%3E%3C/svg%3E") 10 14,text!important;caret-color:#182713!important}
#connectionDialog input[type="checkbox"]{cursor:pointer!important}
zemu-roll{display:inline-block;vertical-align:bottom;position:relative;overflow:hidden;height:1.5em;height:1lh;line-height:inherit;font:inherit;letter-spacing:inherit;max-width:100%;white-space:nowrap}
zemu-roll-track{display:block;position:relative;height:100%;line-height:inherit;transform:translateY(0);transition:transform .4s cubic-bezier(.215,.61,.355,1)}
zemu-roll-label{display:block;line-height:inherit;white-space:pre}
zemu-roll-label[aria-hidden="true"]{position:absolute;top:100%;left:0}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 #connectionDialog[data-ready="true"] :is(a,button:not(:disabled),label):is(:hover,:focus-visible) zemu-roll-track,.home-legal a:is(:hover,:focus-visible) zemu-roll-track,#galleryFooter a:is(:hover,:focus-visible) zemu-roll-track{transform:translateY(-100%)}
}
@media(prefers-reduced-motion:reduce){zemu-roll-track{transition:none!important;transform:none!important}}
#zemu-opening-shell .home-legal{position:relative;display:block;margin:0;padding:18px 32px 22px;background:#2a2821;color:#bdbbae;border:0;font:300 12px/1.6 ZemuSerif,serif}
#zemu-opening-shell .home-legal .site-foot-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;border-top:1px solid #bdbbae33;padding-top:16px}
#zemu-opening-shell .home-legal .site-foot__records{display:flex;align-items:center;flex-wrap:wrap;gap:16px}
#zemu-opening-shell .home-legal :is(.site-foot__copyright,.site-foot__icp,.site-foot__privacy){color:inherit;font:inherit!important}
#zemu-opening-shell .home-legal .site-foot__icp{text-decoration:none}
@media(max-width:900px){#zemu-opening-shell .home-legal{padding:16px 20px}#zemu-opening-shell .home-legal .site-foot-bottom{align-items:flex-start}#zemu-opening-shell .home-legal .site-foot__records{gap:8px;font-size:11px}}

/* Same background fade as the studio sheet, including its exit delay. */
#connectionDialog::backdrop{background:#060804d1;opacity:0;transition:opacity .6s ease-out}
#connectionDialog.is-open::backdrop{opacity:1}
#connectionDialog.is-closing::backdrop{opacity:0;transition:opacity .43s cubic-bezier(.55,.055,.675,.19);transition-delay:1s}
@media(prefers-reduced-motion:reduce){#connectionDialog::backdrop,#connectionDialog.is-closing::backdrop{transition:opacity .15s;transition-delay:0s}}

#connectionDialog .connection-paper{height:auto;max-height:var(--panel-height);padding-bottom:64px}
@media(max-width:900px){#connectionDialog .connection-paper{height:var(--panel-height);padding-bottom:24px}}

@media(min-width:1201px){
#connectionDialog .auth-card h1{margin-bottom:24px}
#connectionDialog .field{margin-bottom:14px}
#connectionDialog .field label{margin-bottom:6px}
#connectionDialog .control input,#connectionDialog .toggle{height:48px}
#connectionDialog .check{margin-top:12px}
#connectionDialog .submit{min-height:48px;margin-top:12px;padding-top:10px;padding-bottom:10px}
}
@media(min-width:1201px){#connectionDialog .submit{margin-top:25px}}

#connectionDialog .contact-project-items{display:flex;flex-direction:column;gap:10px}
@media(min-width:1201px){
#connectionDialog .contact-directory{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:28px}
#connectionDialog .contact-directory>*{min-width:0;width:auto}
#connectionDialog .contact-links>.contact-col{height:100%;min-height:0}
#connectionDialog .contact-project-items{flex:1;justify-content:space-between;gap:10px;min-height:0}
#connectionDialog .contact-capture input{min-width:0}
}
@media(min-width:1201px){#connectionDialog .contact-links{display:flex;flex-direction:column;align-self:stretch}#connectionDialog .contact-links>.contact-col{height:auto;flex:1;width:100%}}

/* A little more green below the aligned content. */
#connectionDialog .connection-paper{padding-bottom:108px}
@media(max-width:900px){#connectionDialog .connection-paper{padding-bottom:40px}}
#zemu-opening-shell .wordmark{align-items:flex-end}
#zemu-opening-shell .wordmark>span{line-height:1;display:block}
#zemu-opening-shell .wordmark .stroke-logo{display:block}
@media(min-width:1201px){
#connectionDialog .contact{padding-left:clamp(20px,2.3vw,50px);padding-right:100px}
#connectionDialog .contact-directory{column-gap:20px}
#connectionDialog .connection-login{justify-content:flex-start;padding-left:76px}
#connectionDialog .auth-card{max-width:420px}
}
@media(min-width:1201px){#connectionDialog .contact{padding-right:76px}}

/* Align the visible lettering with the logo ink, including mobile sizing. */
#zemu-opening-shell .wordmark>span{translate:0 .125em}

/* Keep shared panels independent of host-page body typography. */
#connectionDialog{font-size:16px;line-height:normal}
