/* The way in, set as the DeepEarth Simulator's loading plate is set: the lockup,
   the product's name, one hairline, and two fields. White ground, black ink. */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{height:100%}
/* THE FOOT HAS ITS OWN ROOM. It was fixed to the window's foot while the plate sat centred, so a plate taller than the
   room above it ran under the foot: the sign-up form's links overprinted the copyright on a phone (2026-10-06). */
body{
    min-height:100%;position:relative;padding:72px 0 104px;
    background:#fff;color:#111;
    font-family:'Oxygen',sans-serif;font-weight:300;
    display:flex;align-items:center;justify-content:center;
    -webkit-font-smoothing:antialiased;
}
.frame{position:fixed;inset:22px;border:1px solid rgba(0,0,0,.08);pointer-events:none}
.plate{
    width:min(360px,82vw);
    display:flex;flex-direction:column;align-items:center;
    opacity:0;transform:translateY(6px);
    animation:rise 1.1s cubic-bezier(.2,.7,.2,1) .15s forwards;
}
@keyframes rise{to{opacity:1;transform:none}}
.mark{width:min(320px,76vw);margin-bottom:2rem}
.name{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;font-size:1.9rem;letter-spacing:.01em}
.name b{font-weight:600}
.name i{font-style:italic;font-weight:300}
.rule{width:100%;height:1px;background:rgba(0,0,0,.14);margin:1.2rem 0 1.6rem}
form{width:100%;display:flex;flex-direction:column;align-items:center}
.field{width:100%;margin-bottom:1.35rem}
.field input{
    width:100%;background:transparent;border:0;
    border-bottom:1px solid rgba(0,0,0,.28);color:#111;
    font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;
    font-size:1.32rem;line-height:1.6;
    padding:.35rem .1rem;text-align:center;letter-spacing:.02em;
    outline:none;transition:border-color .35s ease;
    -webkit-appearance:none;border-radius:0;
}
.field input::placeholder{color:#8a8a8a}
.field input:focus{border-bottom-color:#111}
.field input[type=password]{letter-spacing:.18em;font-style:normal}
.field input[type=password]:placeholder-shown{letter-spacing:.02em;font-style:italic}
input:-webkit-autofill,input:-webkit-autofill:hover,
input:-webkit-autofill:focus,input:-webkit-autofill:active{
    -webkit-text-fill-color:#111!important;
    -webkit-box-shadow:0 0 0 1000px #fff inset!important;
    caret-color:#111;transition:background-color 9999s ease-in-out 0s;
}
button{
    margin-top:.9rem;background:transparent;border:1px solid rgba(0,0,0,.4);
    color:#111;
    font-family:'Oxygen',sans-serif;font-size:.6rem;font-weight:400;
    letter-spacing:.34em;text-indent:.34em;text-transform:uppercase;
    padding:.85rem 2.4rem;cursor:pointer;
    transition:border-color .3s ease,color .3s ease,background .3s ease;
}
button:hover{border-color:#111;background:#111;color:#fff}
.err{margin-top:1.5rem;min-height:1em;
    font-family:'Cormorant Garamond',serif;font-style:italic;
    font-size:1rem;color:#9c3d1a;letter-spacing:.03em}
.foot{position:absolute;left:0;right:0;bottom:46px;text-align:center;
    font-size:.52rem;letter-spacing:.3em;text-indent:.3em;
    text-transform:uppercase;color:#737373}
@media(max-width:600px){body{padding:56px 0 84px}.frame{inset:14px}.mark{margin-bottom:1.6rem}.name{font-size:1.6rem}.foot{bottom:34px}}
/* the account pages beside the way in (accounts.py): the same plate, a line of words, small links under the form */
.lead{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.12rem;line-height:1.5;color:#333;text-align:center;margin:-.4rem 0 1.4rem}
.field textarea{width:100%;min-height:9rem;background:transparent;border:1px solid rgba(0,0,0,.2);color:#111;
    font-family:'Cormorant Garamond',serif;font-size:1.1rem;line-height:1.5;padding:.6rem .7rem;outline:none;resize:vertical}
.field textarea:focus{border-color:#111}
.links{margin-top:1.6rem;display:flex;gap:1.4rem;justify-content:center;flex-wrap:wrap}
.links a{font-size:.56rem;letter-spacing:.26em;text-transform:uppercase;color:#555;text-decoration:none;border-bottom:1px solid transparent}
.links a:hover{color:#111;border-bottom-color:#111}
.ok{margin-top:1.2rem;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1rem;color:#2f5b37}
/* Google's way in (google_auth.py), beside the form's own button */
.google{display:inline-block;margin-top:1rem;font-size:.6rem;font-weight:400;letter-spacing:.3em;text-transform:uppercase;
    color:#111;text-decoration:none;border:1px solid rgba(0,0,0,.4);padding:.85rem 1.6rem}
.google:hover{border-color:#111;background:#111;color:#fff}
.or{margin:1.4rem 0 .2rem;font-size:.56rem;letter-spacing:.26em;text-transform:uppercase;color:#888}
.field select{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(0,0,0,.28);color:#111;
    font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.32rem;padding:.35rem .1rem;text-align:center;
    text-align-last:center;outline:none;border-radius:0;-webkit-appearance:none;appearance:none}
.field select:focus{border-bottom-color:#111}
.field .fixed{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.32rem;text-align:center;color:#333;padding:.35rem 0}
.hint{font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;color:#888;text-align:center;margin:-.6rem 0 1rem}
.foot-links{margin-left:14px}
.foot-links a{color:inherit;text-decoration:none}
.foot-links a:hover{text-decoration:underline}
@media(max-width:600px){.foot-links{display:block;margin:8px 0 0}}
/* sign-up's consent line (accounts.signup): under the button, its links legible */
.agree{margin:1.4rem 0 0;font-size:.56rem;line-height:1.9;letter-spacing:.2em;text-transform:uppercase;color:#888;text-align:center}
.agree a{color:#555;text-decoration:none;border-bottom:1px solid rgba(0,0,0,.3)}
.agree a:hover{color:#111;border-bottom-color:#111}