/* Title (minimal, modern): #tbg is the living background; #tui paints the UI, #tctl holds transparent real controls over it */
#title{display:block;padding:0;gap:0;background:transparent;overflow:hidden;touch-action:manipulation}
#title[hidden]{display:none}
#tbg{position:absolute;left:0;top:0;width:100%;height:100%;display:block;background:#07050c;opacity:0;transform-origin:50% 50%;will-change:filter,transform;pointer-events:none}
#tui{position:absolute;left:0;top:0;width:100%;height:100%;display:block;pointer-events:none;}
#tctl{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
#tsafe{position:absolute;left:0;top:0;width:0;height:0;visibility:hidden;pointer-events:none;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
#tctl .tb,#tctl .ti{position:absolute;box-sizing:border-box;margin:0;pointer-events:auto;border:0;outline:0;border-radius:0;background:transparent;box-shadow:none;font-family:var(--font-ui);-webkit-tap-highlight-color:transparent}
#tctl .tb{padding:0;cursor:pointer;color:transparent;font-size:1px;transform:none}
#tctl .tb[tabindex="-1"]{cursor:default}
#tctl .tb:active{transform:none;background:transparent}
#tctl .ti{font-size:16px;line-height:normal;color:rgba(255,255,255,0.92);caret-color:#fff;-webkit-user-select:text;user-select:text;-webkit-appearance:none;appearance:none;touch-action:manipulation;text-shadow:none}
#tctl .ti::placeholder{color:rgba(255,255,255,0.32);opacity:1}
#tctl .ti:-webkit-autofill,#tctl .ti:-webkit-autofill:focus{-webkit-text-fill-color:rgba(255,255,255,0.92);caret-color:#fff;-webkit-box-shadow:0 0 0 100px #14141a inset;transition:background-color 99999s}
#tctl .ti::selection{background:rgba(255,255,255,0.28);color:#fff}
/* boot splash: plain DOM, shown before any image or font loads; fades out when the first scene is ready */
#tsplash{position:absolute;left:0;top:0;width:100%;height:100%;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:36px;background:#07050c;pointer-events:none;transition:opacity .45s ease}
#tsplash.gone{opacity:0}
.tsl{font:300 min(32px,6vw)/1 var(--font-ui);letter-spacing:.45em;margin-right:-.45em;color:rgba(255,255,255,.92);text-shadow:0 0 24px rgba(0,0,0,.5)}
.tsload{display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.85);font:12px var(--font-ui);font-variant-numeric:tabular-nums}
#tspercent{width:36px;text-align:right}
.tsb{width:160px;height:2px;background:rgba(255,255,255,.14);overflow:hidden;border-radius:1px}
.tsb i{display:block;height:100%;width:0%;background:rgba(255,255,255,.85);transition:width .1s linear}
@keyframes tsl{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}
@media (min-width:600px){.tsl{font-size:44px}}
.tsli{display:block;height:32px;width:auto;max-width:calc(100vw - 48px)}.tst{display:none}.tsl.txt .tsli{display:none}.tsl.txt .tst{display:inline}
@media (min-width:600px){.tsli{height:48px}}
@media (prefers-reduced-motion:reduce){.tsb i{transition:none}}
#tsplash[hidden]{display:none}
/* language switch, top right of the title */
#tlang{position:absolute;right:calc(env(safe-area-inset-right) + 14px);top:calc(env(safe-area-inset-top) + 12px);z-index:6;display:flex;gap:2px;padding:3px;border-radius:999px;background:rgba(10,10,14,.5);border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#tlang button{margin:0;padding:5px 10px;min-width:44px;min-height:44px;border:0;border-radius:999px;background:transparent;color:rgba(255,255,255,.55);font:600 11px/1 var(--font-ui);letter-spacing:.04em;cursor:pointer;transform:none;transition:background .15s,color .15s}
#tlang button.on{background:rgba(255,255,255,.9);color:#14141a}
#tlang button:not(.on):hover{color:rgba(255,255,255,.9)}
#tlang button:active{transform:none}

/* XP login wells retain native input, selection and the blinking caret. */
#tctl :is(#t_tEmail,#t_tPass){color:#303c4b;caret-color:#285fab;border-radius:0!important}
#tctl :is(#t_tEmail,#t_tPass)::placeholder{color:#83887e}
#tctl :is(#t_tEmail,#t_tPass):-webkit-autofill,#tctl :is(#t_tEmail,#t_tPass):-webkit-autofill:focus{-webkit-text-fill-color:#303c4b;caret-color:#285fab;-webkit-box-shadow:0 0 0 100px #fffdf7 inset}
#tctl :is(#t_tEmail,#t_tPass)::selection{background:#b8d6f5;color:#21344c}
