/* V10.8.663 (TEST) Tutor sign-in full page ("do the same for the other sign-ins"; V655 Command Center layout). The Teaching From My Desk scene + calm line-sketch study room fill the page at ~85% (light veil), a white card floats in the middle holding logo + tagline + form. Same 4s loop as V652. Reduce Motion = still. Scoped to .si-wrap.tf663 (added by tf663.js). */
body.td-out .top{display:none!important}
body.td-out{background:#f6f8fc}
body.tf663-on #main{padding:0!important;max-width:none!important}
.si-wrap.tf663{position:relative;display:flex;align-items:center;justify-content:center;max-width:none!important;width:100%;margin:0!important;min-height:100vh;min-height:100dvh;padding:40px 24px!important;overflow:hidden;--s:1.25}
/* background layer */
.tf663 .tf-bg{position:absolute!important;inset:0;display:block!important;margin:0!important;opacity:.85;z-index:0;pointer-events:none;overflow:hidden}
.tf663 .tf-bg>*{position:absolute}
.tf663 .tf-wall{inset:0;background:radial-gradient(900px 520px at 22% 18%,rgba(255,255,255,.9),transparent 70%),radial-gradient(circle,rgba(15,37,87,.05) 1px,transparent 1.4px) 0 0/28px 28px,linear-gradient(180deg,#eef4ff 0,#f4eefc 100%)}
.tf663 .tf-desk{left:0;right:0;bottom:0;height:calc(62px * var(--s));background:linear-gradient(#cdbdea 0,#cdbdea 21%,#bba9e0 21%,#bba9e0 calc(21% + 2px),#e4d9f5 calc(21% + 2px))}
/* the desk scene, bigger, left of the card, sitting on the page-wide desk */
.tf663 .tf-scene{left:auto;right:calc(50% + 250px);bottom:0;width:calc(362px * var(--s));height:calc(320px * var(--s))}
.tf663 .tf-scene .ds648{position:absolute;left:0;top:0;margin:0!important;display:block}
.tf663 .tf-scene .ds648 .ds-in{width:362px!important;max-width:none!important;height:320px;transform:scale(var(--s));transform-origin:0 0;border-radius:0;box-shadow:none;overflow:visible}
.tf663 .tf-scene .ds-svg>rect:first-of-type{fill:transparent}
/* the card */
.tf663 .login.si-card{position:relative;z-index:2;margin:0!important;width:min(460px,100%);max-width:none;padding:26px 30px 24px;border-radius:26px;background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.9);
  box-shadow:0 0 90px 50px rgba(255,255,255,.42),0 2px 6px rgba(15,37,87,.06),0 34px 70px -34px rgba(15,37,87,.38)}
.tf663 .tf-head{display:flex;flex-direction:column;align-items:center;margin:0 0 16px}
.tf663 .tf-logo{display:block;height:42px;width:auto;max-width:150px;animation:tdlg648 .6s cubic-bezier(.2,1.3,.4,1) both,tdhop648 3.6s cubic-bezier(.3,0,.3,1) 1.2s infinite}
.tf663 .tf-head .si-tag{margin:10px 0 0!important;font-size:16px;line-height:1.35;text-align:center;color:#3d4657}
.tf663 .login.si-card h1{text-align:center}
.tf663 .login.si-card>.d{text-align:center}
/* decor: grown-up line sketches */
.tf663 .tf-sec{transform-box:view-box;transform-origin:42px 42px;animation:tfsec 4s linear infinite}
@keyframes tfsec{to{transform:rotate(360deg)}}
.tf663 .tf-sway{animation:dsl648 4s ease-in-out infinite}
.tf663 .tf-ln{stroke-dasharray:60;stroke-dashoffset:60;animation:tfln 4s linear infinite}
@keyframes tfln{0%,8%{stroke-dashoffset:60;opacity:1}40%,89%{stroke-dashoffset:0;opacity:1}96%,100%{stroke-dashoffset:0;opacity:0}}
.tf663 .tf-pin{width:240px;height:170px}.tf663 .tf-pin svg{position:absolute;inset:0;width:100%;height:100%}
.tf663 .tf-sn{position:absolute;display:block;transform:rotate(var(--r))}
.tf663 .tf-p{display:block;font:700 22px/1.1 Caveat647,"Bradley Hand",cursive;color:#1a2340;padding:12px 14px 10px;white-space:nowrap;font-style:normal}
.tf663 .tf-k4 .ds-p{animation-name:tfn4!important}.tf663 .tf-k5 .ds-p{animation-name:tfn5!important}.tf663 .tf-k6 .ds-p{animation-name:tfn6!important}
@keyframes tfn4{0%,12%{opacity:0;transform:translateY(-22px) scale(.4)}15%{opacity:1;transform:scale(1.08)}17%{transform:scale(.96)}19%{transform:scale(1)}89%{opacity:1;transform:none}96%,100%{opacity:0;transform:scale(.94)}}
@keyframes tfn5{0%,34%{opacity:0;transform:translateY(-22px) scale(.4)}37%{opacity:1;transform:scale(1.08)}39%{transform:scale(.96)}41%{transform:scale(1)}89%{opacity:1;transform:none}96%,100%{opacity:0;transform:scale(.94)}}
@keyframes tfn6{0%,62%{opacity:0;transform:translateY(-22px) scale(.4)}65%{opacity:1;transform:scale(1.08)}67%{transform:scale(.96)}69%{transform:scale(1)}89%{opacity:1;transform:none}96%,100%{opacity:0;transform:scale(.94)}}
.tf663 .tf-n5{display:none}
/* desktop spots (card is 460 wide, centered) */
.tf663 .tf-frame{left:5%;top:8%;width:130px}
.tf663 .tf-clock{left:calc(50% - 380px);top:7%;width:84px}
.tf663 .tf-w1{left:4%;top:calc(8% + 120px)}
.tf663 .tf-w2{left:calc(50% - 470px);top:calc(7% + 112px)}
.tf663 .tf-shelf{left:calc(50% + 300px);top:7%;width:260px}
.tf663 .tf-pin{left:calc(50% + 290px);top:calc(7% + 158px)}
.tf663 .tf-w3{left:calc(50% + 330px);top:calc(7% + 360px)}
.tf663 .tf-w4{right:4%;top:calc(7% + 300px)}
.tf663 .tf-lamp{left:calc(50% + 270px);bottom:calc(62px * var(--s) - 18px);width:110px}
.tf663 .tf-books{left:calc(50% + 400px);bottom:calc(62px * var(--s) - 6px);width:150px}
.tf663 .tf-plant{right:2%;bottom:calc(62px * var(--s) - 8px);width:84px}
.tf663 .tf-nb{left:calc(50% - 90px);bottom:calc(62px * var(--s) * .18);width:180px}
@media (min-width:1600px){.si-wrap.tf663{--s:1.45}}
@media (max-width:1380px){.tf663 .tf-w4{display:none}.tf663 .tf-plant{right:1%}}
@media (max-width:1250px){.si-wrap.tf663{--s:.9}.tf663 .tf-scene{right:auto;left:0}.tf663 .tf-clock{left:calc(5% + 145px)}.tf663 .tf-w2,.tf663 .tf-books{display:none}.tf663 .tf-shelf{width:200px;left:calc(50% + 260px)}.tf663 .tf-pin{left:calc(50% + 256px);scale:.82;transform-origin:0 0}}
@media (max-width:1060px) and (min-width:761px){.si-wrap.tf663{--s:.85}.tf663 .tf-scene{right:auto;left:0}.tf663 .tf-clock,.tf663 .tf-w1,.tf663 .tf-frame{display:none}.tf663 .tf-shelf{display:none}.tf663 .tf-pin{left:auto;right:2%;top:6%}.tf663 .tf-lamp{left:auto;right:12%}}
/* phone: scene on top, card below it, desk + notes under the card; nothing behind text */
@media (max-width:760px){
 .si-wrap.tf663{display:block;--s:1;padding:256px 14px 150px!important}
 .tf663 .tf-scene{right:auto;left:50%;margin-left:-181px;top:0;bottom:auto}
 .tf663 .tf-scene .k652-n3{display:none}
 .tf663 .tf-desk{height:120px}
 .tf663 .tf-frame,.tf663 .tf-clock,.tf663 .tf-shelf,.tf663 .tf-pin,.tf663 .tf-w1,.tf663 .tf-w3,.tf663 .tf-w4,.tf663 .tf-nb{display:none}
 .tf663 .tf-w2{left:14px;top:auto;bottom:62px}.tf663 .tf-w2 .tf-p{font-size:20px;padding:10px 12px 8px}
 .tf663 .tf-n5{display:block;right:14px;bottom:14px;transform:rotate(-2deg)}
 .tf663 .tf-n5 .ds-p{display:block}
 .tf663 .tf-books{display:block;left:10px;bottom:4px;width:120px}
 .tf663 .tf-lamp,.tf663 .tf-plant{display:none}
 .tf663 .login.si-card{width:100%;padding:20px 20px 18px;border-radius:22px;box-shadow:0 0 50px 24px rgba(255,255,255,.4),0 2px 6px rgba(15,37,87,.06),0 26px 50px -28px rgba(15,37,87,.38)}
 .tf663 .tf-head{margin-bottom:12px}.tf663 .tf-logo{height:36px}.tf663 .tf-head .si-tag{font-size:15px;margin-top:8px!important}
 .tf663 .login.si-card h1{font-size:23px}
 .tf663 .login.si-card .field{margin-bottom:12px}.tf663 .login.si-card .field input{height:48px}
 .tf663 .login.si-card .btn.primary{height:52px}}
@media (prefers-reduced-motion:reduce){.tf663 *{animation:none!important}.tf663 .ds-p{opacity:1!important}.tf663 .tf-ln{stroke-dashoffset:0!important}.tf663 .ds-m{-webkit-clip-path:none!important;clip-path:none!important}.tf663 .ds-chk path{stroke-dashoffset:0!important}}

/* V10.8.1869 (TEST): phone sign-in helper text and field labels at the 28px big-type size. Display only. */
@media (max-width:600px){
  .tf663 p.d{font-size:28px!important;line-height:1.25!important}
  .tf663 label{font-size:28px!important;line-height:1.2!important}
  .tf663 #forgotBtn{font-size:22px!important}
}