.web-copy-dialog{max-width:360px}
#copy-text{display:block;width:100%;font:inherit;font-size:18px;padding:12px;border:1px solid #ddd2e5;border-radius:8px;background:#fff;color:#28252d;-webkit-user-select:text;user-select:text}
.web-copy-dialog .usage-body{padding-bottom:24px}
button:focus-visible{outline:2px solid #665377!important;outline-offset:3px}
@media(max-width:360px){.hint{font-size:10px}}

.web-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid #d8cde2;border-radius:50%;background:#eee8f3;color:#765a8d;box-shadow:0 3px 12px rgba(67,45,84,.12);transition:background .15s,box-shadow .15s}
.web-nav span{font-family:Arial,sans-serif;font-size:32px;font-weight:400;line-height:1;margin-top:-3px}
.web-nav-previous{left:-64px}
.web-nav-next{right:-64px}
.web-nav:hover{background:#e4d9ed;box-shadow:0 4px 14px rgba(67,45,84,.18)}
.web-nav:active{background:#d9cbe5}
@media(max-width:640px){.web-nav-previous{left:-12px}.web-nav-next{right:-12px}.web-nav{background:rgba(245,240,249,.96)}}

/* Website widths are independent of the phone container. */
.app{max-width:800px;padding:28px 64px 14px}
.web-nav-previous{left:-54px}.web-nav-next{right:-54px}
.detail{padding-top:58px}
.detail-toolbar{width:240px}
.detail-toolbar button{width:auto;min-width:60px;padding:6px 10px}
.detail-toolbar button+button{margin-left:10px}
.detail-help{height:auto;min-height:32px;white-space:normal;padding:6px 12px}
@media(max-width:760px){.app{max-width:620px;padding:24px 24px 14px}.web-nav-previous{left:-12px}.web-nav-next{right:-12px}}

.app{padding-bottom:34px;padding-bottom:calc(34px + env(safe-area-inset-bottom,0px))}
.web-filing{position:fixed;left:12px;bottom:5px;bottom:calc(5px + env(safe-area-inset-bottom,0px));z-index:1;padding:2px 0;color:#9b959e;font-size:10px;font-weight:400;line-height:16px;text-decoration:none}
.web-filing:hover{color:#776585;text-decoration:underline}