:root{--background:#eff6ff;--foreground:#0f172a;--border-color:#312e81}::selection{color:var(--foreground);background:#38bdf8}html,body{background:var(--background);width:100vw;height:100vh;color:var(--foreground);perspective:2640px;justify-content:center;align-items:center;margin:0;padding:0;display:flex}button{cursor:pointer;outline:none}input,button:not(.raw){width:calc(100% - 28px);font:inherit;border:1px solid var(--border-color);background:#fff;border-radius:8px;outline:none;padding:10px 14px}button:not(.raw){background:var(--border-color);width:100%;color:var(--background);margin-top:20px;margin-bottom:16px;font-weight:700;transition:background .2s,color .2s}button:not(.raw):hover,button:not(.raw):focus-visible{color:var(--border-color);background:#fff}label{-webkit-user-select:none;user-select:none;width:100%;margin:10px 0;position:relative}label span{cursor:text;background:#fff;padding:0 4px;transition:top .2s ease-in-out,left .2s ease-in-out,scale .2s ease-in-out;position:absolute;top:50%;left:10px;transform:translateY(-50%)}:is(label:has(input:focus) span,label:has(input:not(:placeholder-shown)) span){top:0;left:0;scale:.8}label button{border:0;border-left:1px solid var(--border-color);background:0 0;border-radius:0 8px 8px 0;justify-content:center;align-items:center;width:50px;height:100%;margin:0;padding:0;transition:background .2s;display:flex;position:absolute;top:0;right:-2px}label button img{transition:filter .2s}label button:hover,label button:focus-visible{background:var(--border-color)}:is(label button:hover,label button:focus-visible) img{filter:invert()}.shield,.lion{opacity:.3;-webkit-user-select:none;user-select:none;position:absolute}.lion{opacity:.3;width:auto;height:100%;top:0;left:0}.shield{bottom:20px;right:20px}